Material UI Autocomplete default value of empty string

Question

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

How do I get this warning to go away? It doesn't cause any issues, but it extremely annoying to have this thrown in the console for every rerender. The only way I seem to get it to not happen is setting the initial value for the field as null, which in my understanding is not what I should be putting as a default value of an input.

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.

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.

Answer 1

you can use null as initial state and that might achieve what you're trying

value={data.value || null}

if you set it to undefined it complains about controlled component, this way I don't get an error even after I use the Autocomplete

Answer 2

I solved it handling the case in which the input string is empty (you are not doing that). 3 things are needed in your Sandbox:

1. line 17, inside the getOptionSelected, you must return true when the value is the empty string; in this way React selects one option and the warning disappears.
2. line 14, modify the getOptionLabel, handling the case of the empty string. I would do the following:

getOptionLabel={option => option.title ? option.title : ''}

So in case the option has a title, it returns a title, otherwise it returns an empty string that is visualized.

3. Finally, modify the onChange to handle the empty string, in this way

onChange={(e, selectedObject) => {
    if (selectedObject !== null)
        setValue(selectedObject)
}}

Overall:

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

export default function FreeSoloCreateOption() {
  const [value, setValue] = React.useState("");

  return (
    <Autocomplete
      value={value}
      id="empty-string-demo"
      options={top100Films}
      getOptionLabel={option => option.title ? option.title : ''}
      getOptionSelected={(option, value) => {
        //nothing that is put in here will cause the warning to go away
        if (value === "") {
          return true;
        } else if (value === option) {
          return true;
        }
      }}
      onChange={(e, selectedObject) => {
        if (selectedObject !== null)
            setValue(selectedObject)
      }}
      renderOption={option => option.title}
      style={{ width: 300 }}
      renderInput={params => (
        <TextField
          {...params}
          label="Default Value of Empty String"
          variant="outlined"
        />
      )}
    />
  );
}