Material UI Autocomplete not updating input value (React)

Question

I made an Autocomplete component in React using Material UI's Autocomplete component. Here's the code

import { useState } from "react";
import { Autocomplete as MuiAutcomplete } from "@mui/material";
import {useFormContext} from "react-hook-form";


interface props {
    name: string,
    options?: string[],
    getOptions?: (value: string) => {
        label: string,
        id: number
    }[] | string[],
    freeSolo?: boolean
};

const Autocomplete = ({name, options=[], getOptions, freeSolo=false}: props) => {
    const [autocompleteValues, setAutocompleteValues] = useState<any[]>(options);
    const {setValue, getValues} = useFormContext();

    return (
        <MuiAutcomplete
            options={autocompleteValues}
            renderInput={({ InputProps, inputProps }) => (
                <div ref={InputProps.ref}>
                <input
                    type="text"
                    {...inputProps}
                    className="bg-transparent outline-none p-1"
                />
                </div>
            )}
            value={getValues(name)}
            onChange={(e, v) => {
                setValue(name, v);
            }}
            getOptionLabel={(option) => option.label || option}
            freeSolo={freeSolo}
        />
    )
}

export default Autocomplete;

The options display just fine when I type but when actually selecting an option the input field doesn't actually get updated. It instead shows this error:

`MUI: The value provided to Autocomplete is invalid.None of the options match with `""`.You can use the `isOptionEqualToValue` prop to customize the equality test. `

I'm not entirely sure what's going on. Here's a video showing the error in case you need clarification https://i.sstatic.net/QmfoU.jpg (sorry for low res, Imgur's compression ruined it)

Does this answer your question? Material-ui Autocomplete warning The value provided to Autocomplete is invalid — mc-user
– mc-user, Commented Aug 30, 2022 at 4:43

MOHD SAQUIB · Accepted Answer · 2022-08-24 06:30:57Z

1

Can you please details about what options are you passing?

It will be better if you can provide a codesandbox.

It is due to the option which you are selecting is not matching the value in options

answered Aug 24, 2022 at 6:30

MOHD SAQUIB

418 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mc-user Over a year ago

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

Lucas Nantes · Accepted Answer · 2022-11-21 20:00:02Z

1

The "" value is an actual value for auto complete. If you want to make it work with an empty field you can:

// Set value to null. If you set it to 'undefined' it will give you a warning similar to the current one
value={getValues(name) || null}

Or

// Override the function which checks if the value is equal to the option.
// Basically, you handle the empty string here.
isOptionEqualToValue={(option, currentValue) => {
            if (currentValue === '') return true;
            return option.name === currentValue.name;
          }}

answered Nov 21, 2022 at 20:00

Lucas Nantes

307 bronze badges

Comments

Scott Rafferty · Accepted Answer · 2024-03-13 17:17:53Z

1

This may no longer be a problem due to fixes made in MUI but I was having the same issue and nothing in the Github issues applied to my own scenario.

I noticed that if you pass in undefined as the value prop initially the Autocomplete component switches from Uncontrolled to Controlled mode permanently (the console logs actually say this!). This means that the value prop is then handled internally by the component so you cannot change it from outside Autocomplete.

The solution was to pass in NULL as the value prop instead which keeps the component in Uncontrolled mode and all props passed in after that refresh appropriately even if the options (or value) are ASYNC delayed.

edited Mar 13, 2024 at 17:17

answered Mar 13, 2024 at 17:14

Scott Rafferty

112 bronze badges

Collectives™ on Stack Overflow

Material UI Autocomplete not updating input value (React)

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related