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

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 3

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 4

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 5

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

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 8

When I encountered this, it was when options for the autocomplete changed, and wanted to clear the input value. It wouldn't clear with just the options changing. What worked for me is adding a key value onto the autocomplete which depended on the change which necessitated clearing.

Answer 9

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 10

using onChange property we can clear the value by clicking the clear icon in the following way

<Autocomplete
    fullWidth={true}
    label={'Source'}
    margin={'noraml'}
    multiple={false}
    name={'Source'}
    getOptionSelected={useCallback((option, value) => option.value === value.value)}
    ref={SourceRef}
    value={formValues.Source === '' ? {label: ''} : {label: formValues.Source}}
    options={SourceStatus}
    onChange={useCallback((e, v) => {
        if (typeof v === 'object' && v !== null) {
            handleInputChange(e, v) // help to set the value
        } else {
            handleInputChange(e, {label: ''}) // help to reset the value
        }
    })}
/>

Answer 11

In my case for multiselect freeSolo onChange props 3rd argument reason solved my all issues.

AutocompleteChangeReason can be:

• blur
• clear
• createOption
• removeOption
• selectOption

and 2nd arg of this props gives u already updated list of (multiselect) value/s.

      onChange={(_event, newOptions, reason) => {
        setOptions(
          reason === 'clear' ? [] : [...newOptions.map((o) => Number(o))],
        );
      }}

Answer 12

If you need only the selected value, set the value to an empty object and render the option to your needs.

<Autocomplete
    value={{}}
    onChange={handleSelectionChanged}
    options={options ?? []}
    getOptionLabel={x => (!x ? '' : x?.name ?? '')}
    renderInput={params => <TextField {...params} label="" />}
/>

Answer 13

If you are using objects, you can use the following code to clear the field.

Ensure you add isOptionEqualToValue:

<Autocomplete
    style={{ width: 250 }}
    multiple
    id="checkboxes-tags-demo"
    options={list}
    isOptionEqualToValue={(option, newValue) => {
        return option.id === newValue.id;
    }}
    value={selected}
    onChange={(e, val) => handleSelected(e, val)}
    getOptionLabel={(option) => option.name}
    renderInput={(params) => (
        <TextField
            {...params}
            label="Add to Multiple"
            placeholder="Favorites" />
    )} />

Just set an empty array in your state through functions, and it'll be cleared.

Answer 14

Try this method:

use onChange method and pass third parameter reason and compare to clear text if reason is clear then executed this function.

<Autocomplete
       onChange={(event, newValue, reason) => {             
            if (reason === 'clear') {
                console.log("Put your clear logic here: this condition executed when clear button clicked")
                setValue({ title: '', year: '' }) //for reset the value
                return
            }
        }}   
   />

Answer 15

I've noticed when you clear, it triggers onChange but the option is null, so you can reset your field if is a controlled input

onChange = (_, option: object | null) => {
   if(!option) setState(null);

   setState(option.value);
}

Answer 16

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.