CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
aclymateDev
aclymateDev

Reputation: 21

Value provided to Material UI autocomplete is incorrect even with existing getOptionSelect param

I am trying to build my own version of the Google Places autocomplete that's featured in the Material UI documentation. The autocomplete works and I'm able to update my component's state with the result, but I still get a warning saying:

The value provided to Autocomplete is invalid.

As they've suggested I've added a getOptionSelected to my autocomplete component and have even logged the option and value parameters of the callback function for getOptionSelected to the console to make sure that my equality test is returning matching values.

Here's my component (for simplicity I removed the part where I fetch the data and set the options state since that's not relevant to this issue):

const PlacesAutocomplete = ({ place, editPlace, label }) => {
    const [inputValue, setInputValue] = useState("");
    const [options, setOptions] = useState([]);

    return (
      <Autocomplete
        options={options}
        getOptionLabel={(option) =>
          typeof option === "string" ? option : option.description
        }
        filterOptions={(x) => x}
        autoComplete
        filterSelectedOptions
        includeInputInList
        renderInput={(params) => (
          <TextField
            {...params}
            label={label}
            variant="outlined"
          />
        )}
        getOptionSelected={(option, value) => {
          console.log("option description: " + option.description);
          console.log("value: " + value);
          console.log("equality test: " + option.description === value);
          console.log("value type of: " + typeof value);
          console.log(
            "option description type of: " + typeof option.description
          );

          return option.description === value;
        }}
        value={place}
        onChange={(event, newValue) => {
          setOptions(newValue ? [newValue, ...options] : options);
          editPlace(newValue.description);
        }}
        onInputChange={(event, newInputValue) => {
          setInputValue(newInputValue);
        }}
        renderOption={(option) => {
          const matches =
            option.structured_formatting.main_text_matched_substrings;
          const parts = parse(
            option.structured_formatting.main_text,
            matches.map((match) => [match.offset, match.offset + match.length])
          );

          return (
            <Grid container alignItems="center" spacing={2}>
              <Grid item>
                <LocationOnIcon />
              </Grid>
              <Grid item xs>
                {parts.map((part, index) => (
                  <span
                    key={index}
                    style={{ fontWeight: part.highlight ? 700 : 400 }}
                  >
                    {part.text}
                  </span>
                ))}

                <Typography variant="body2" color="textSecondary">
                  {option.structured_formatting.secondary_text}
                </Typography>
              </Grid>
            </Grid>
          );
        }}
      />
    );
  };

As you can see, I'm setting the value equal to the .description property of the option for the equality test. When I log value and option.description to the console I get the exact same value with the same type but for some reason the equality test returns false, which is why I'm seeing the warning. What am I doing wrong to get a false from the equality test in the getOptionSelected property even though option.description and value return the exact same value?

Upvotes: 2

Views: 5495

Answers (1)

Ozahata
Ozahata

Reputation: 71

Look on getOptionSelected, option and value are the same type so the method will look like:

    getOptionSelected={(option, value) => option.description === value.description}

If the value is not the same type as the option, you need to check if you are not storing other type inside the state (or recieving different value from place).

Upvotes: 1

Related Questions