Material-ui autocomplete clear value

Question

I have one problem in my react code.

I use Material-ui and redux-form. I have select input like and after change this select i should reset value in . I use action 'change' from react-form and set value for textfield. But label in still remains. Can i clear or reset value in ?

<Autocomplete
    options={list}
    getOptionLabel={option => option.name}
    onInputChange={onChange}
    onChange={onChangeAutoComplete}
    noOptionsText='Нет доступных вариантов'
    loadingText='Загрузка...'
    openText='Открыть'
    renderInput={params => (
        <Field
            {...params}
            label={label}
            name={fieldName}
            variant="outlined"
            fullWidth
            component={renderTextField}
            className={classes.textField}
            margin="normal"
        />
    )}
/>

Answer 1

Using hooks on the value prop breaks the functionality of the autocomplete component ( at least for me ). Using class, and setting the local state is the same.

Luckily it is a react component, so it have a "key" prop. When the key prop changes, the component is re-rendered with the default values ( which is an empty array since nothing is selected). I used hooks in the parent component and passed the values to the key prop, whenever reset is needed.

<Autocomplete
    key={somethingMeaningful} // Bool, or whatever just change it to re-render the component
//...other props
/>

Hope this helps!

Answer 2

use value in your <Autocomplete /> like this:

<Autocomplete
    value={this.state.value} //insert your state key here
//...other props
/>

Then clear state of that key, to clear the autocomplete field value

Answer 3

Material UI Autocomplete onInputChange callback provides reason argument. If input has been changed by input, reason will be input and if you selected option then reason will be reset.

onInputChange={(event, newInputValue, reason) => {
    if (reason === 'reset') {
      setValue('')
      return
    } else {
      setValue(newInputValue)
    }
  }}

setValue is useState and you can pass value state to autocomplete value property.

Answer 4

I achieved this by updating the inputValue prop where multiple prop is false. If you are using multiple prop, then there is a propblem (bug). Selected values does not get erased.

Answer 5

I am going to post a very dirty way of clearing the value of Autocomplete. Try it ONLY when nothing else works;

import React, { useRef } from 'react';
...
const autoC = useRef(null);
...
<Autocomplete
  ...
  ref={autoC}
/>

and then when you want to clear the value;

const ele = autoC.current.getElementsByClassName('MuiAutocomplete-clearIndicator')[0];
if (ele) ele.click();

Answer 6

This is what worked for me.

const [name, setName] = useState('');

<Autocomplete
  inputValue={name}
  onChange={(e,v)=>setName(v?.name||v)}
  ...
/>
<Button onClick={()=>setName('')}>
 Clear
</Button>

Answer 7

To solve this, I created a hook that watches the value state of the autocomplete and set the value of the input if the checkClear returns true;

function useAutocompleteInputClear(watch, checkClear) {
    const elmRef = useRef(null);
    useMemo(() => {
            if (!elmRef || !elmRef.current) return;

            if (!checkClear || typeof checkClear !== "function") return;

            const button = elmRef.current.querySelector("button")
            if (checkClear(watch) && button) {
                button.click();
            }

    }, [watch])

    return elmRef;
}

Its first argument is the value that should be watched and its second argument is a function that returns a boolean. if it is true the clearing will happen. Also, the hook returns a ref that needs to pass as ref prop to Autocomplete.

const elmRef = useAutocompleteInputClear(value, v => !v || !v.id)

<Autocomplete ref={elmRef} 
              value={value}
...

Answer 8

You can use something like the following to clear the autocomplete field when an item is selected.

<Autocomplete
  value={null}
  blurOnSelect={true} />

Note that you may also need to set clearOnBlur={true} if you're using the freeSolo option.

Source https://mui.com/api/autocomplete/#props

Answer 9

One easy way to do this is to pass these props to autocomplete like this:

onChange={handleSkillChange}
inputValue=''
clearOnBlur={true}

• onChange is an event handler, which stores the value in the state.
• inputValue='' helps to ensure that the text field inside autocomplete will always be empty
• clearOnBlur={true} helps to clear the value of the autocomplete component when it loses focus.