When passing an empty string to Autocomplete, it throws a console warning saying that the value is invalid.
When passing the default value of empty string to the Autocomplete component, it throws a console warning that the value empty string is invalid.
If the value given to the Autocomplete is an empty string, there should be no warning or errors thrown.
Here is a link to showcase the error: https://codesandbox.io/s/material-demo-n0ijt
1) Pass an empty string to the value property of Autocomplete component.
| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.9.10 |
| Material-UI Lab | v4.0.0-alpha.49 |
| React | latest |
| Browser | latest |
This is my first issue here on Material-UI, so please let me know if you need anything more from me to respond, of if I can clarify anything for you.
馃憢 Thanks for using Material-UI!
We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.
For support, please check out https://material-ui.com/getting-started/support/. Thanks!
If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.
I am confused as to why this was marked as support. It is a feature that is not behaving as expected. If the value of an empty autocomplete is supposed to be null, then that should be marked somewhere in the documentation. But it just seems counter intuitive to throw warnings for using an empty string for an input's default value.
In case this does not get a response, I have also created a StackOverflow question for this issue: https://stackoverflow.com/questions/61219164/material-ui-autocomplete-default-value-of-empty-string
The quick and dirty ('cause it throws a warning) is to add a defaultValue prop to Autocomplete.
The slightly more complicated workaround is to filter the reset on load out by passing the following to onInputChange prop
const handleOnInputChange = (event, newValue, reason) => {
if (reason === 'reset' && newValue == '') {
// Do nothing
}
else {
setSelection(newValue);
}
};
My state variable is called selection
If anyone has a better solution, please let me know.
I also find the usage of a controlled Autocomplete with an empty string quite difficult. The answers on stack overflow also do not really help as they introduce further problems. It would be great if anyone could suggest a working and robust solution here.
Most helpful comment
I am confused as to why this was marked as support. It is a feature that is not behaving as expected. If the value of an empty autocomplete is supposed to be null, then that should be marked somewhere in the documentation. But it just seems counter intuitive to throw warnings for using an empty string for an input's default value.
In case this does not get a response, I have also created a StackOverflow question for this issue: https://stackoverflow.com/questions/61219164/material-ui-autocomplete-default-value-of-empty-string