Material-ui: [Autocomplete] Console warning when passing empty string as default value

Created on 15 Apr 2020  路  4Comments  路  Source: mui-org/material-ui

When passing an empty string to Autocomplete, it throws a console warning saying that the value is invalid.

  • [x] The issue is present in the latest release.
  • [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 馃槸

When passing the default value of empty string to the Autocomplete component, it throws a console warning that the value empty string is invalid.
errorForGithub

Expected Behavior 馃

If the value given to the Autocomplete is an empty string, there should be no warning or errors thrown.

Steps to Reproduce 馃暪

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.

Your Environment 馃寧

| 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.

Autocomplete support

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

All 4 comments

馃憢 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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

sys13 picture sys13  路  3Comments

ghost picture ghost  路  3Comments

pola88 picture pola88  路  3Comments

newoga picture newoga  路  3Comments

TimoRuetten picture TimoRuetten  路  3Comments