Hi,
I want to capture the text I wrote in the Selectbox in the custom renderer section. For example, I could not capture the letters I wrote to the control in the custom renderer (when write “m” or “ma”). I couldn’t do this when using MaterialEnumControl. so I used Autocomplete(MUI) and I can capture the text I wrote in the custom renderer. Now I’m having a problem like this: When I use Autocomplete, the data I select is not assigned to the form data. Can you please give me ideas to solve this problem?
Thanks.
Hi @mahmutbilir,
I’m not sure what you mean with “capture the letters”.
Whenever you write a custom renderer, then you need to go through the injected handleChange method to update the form wide state. You will then get a new data injected and use that again for your input’s value.
When you additionally want to maintain a local state or trigger some effects based on changes in the input, then you should either react on data changes (i.e. after the state-wide update was executed), or do them before calling handleChange (i.e. before the state-wide update is scheduled).
It seems in your case you are only either handling the input changes yourself or only hand them over to JSON Forms. It seems you should do both.
Hi @sdirix, What I mean by “capture the letters” is the “intellisense search” feature.
It is to catch every expression I write, get data from the API and fill the combobox.
But in my tests, handleChange cannot receive the text I write in MaterialEnumControl, if that text is not the same as the label in the option.
Thanks.
handleChange by itself does not care about the value you hand it over. In case of enums, if you hand over a value which is not represented in the schema’s enum array, then you will get validation errors. The data will be stored nevertheless.
Our MuiAutocomplete is implemented in a way to only call handleChange once an actual entry is selected, so the handleChange will not be called with invalid values.
If you want to implement your own MuiAutocomplete, then I would like to recommend copying it and adapting it to your needs. As you can see we maintain our own local state there too: Whatever the user enters is stored in inputValue and can be handled appropriately, e.g. by requesting valid values from an endpoint somewhere. Then call handleChange whenever an actual selection is made.