CODEWITHSUNDEEP
reactjsmaterial-uireact-hooks
Guy
Guy

Reputation: 13286

How to clear the autocomplete's input in Material-ui after an onChange?

In the hooks version of material UI I can't seem to be able to clear the autocomplete after an onChange event:

// @flow
import React, { useRef, useState } from "react";
import "./Autocomplete.scss";
import AutocompleteUI from "@material-ui/lab/Autocomplete";
import TextField from "@material-ui/core/TextField";

function Autocomplete(props) {
    const { options } = props;
    const [value, setValue] = useState();

    const container = useRef();
    const input = useRef();

    function onChange(event, newValue) {
        if (!newValue) return;
        props.onChange(newValue);
        setValue(undefined);
        input.current.value = "";
        event.target.value = "";
    }

    function renderInput(params) {
        return (
            <TextField
                inputRef={input}
                {...params}
                inputProps={{
                    ...params.inputProps,
                    autoComplete: "disabled", // disable autocomplete and autofill
                }}
                margin="none"
                fullWidth
            />
        );
    }

    return (
        <div className="Autocomplete-container">
            {value}
            <AutocompleteUI
                ref={container}
                options={options}
                autoHightlight={true}
                clearOnEscape={true}
                autoSelect={true}
                // freeSolo={true}
                getOptionLabel={option => option.title}
                renderInput={renderInput}
                value={value}
                onChange={onChange}
            />
        </div>
    );
}

export default Autocomplete;

Diving into the source code I've noticed the component uses useAutocomplete hook internally. However, neither setInputValue nor resetInputValue which live internally inside that hook are exposed outside. Is there a way to accomplish an input clear after an onChange?

Upvotes: 13

Views: 25763

Answers (5)

Ibrahima Dansoko
Ibrahima Dansoko

Reputation: 109

I had the same issue and I solved it with this :

    const [search, setSearch] = useState("");

...

     <Autocomplete
          id="grouped-demo"
          options={tagsList}
          getOptionLabel={(option) => option.tag}
          onChange={(event, value) =>value ? setSearch(value.tag) : setSearch(event.target.value)}
          style={{width: 700}}
          renderInput={(params) => <TextField {...params} label="Search" variant="outlined"/>}
     />

Upvotes: 4

shehab khalid
shehab khalid

Reputation: 101

You need to set the inputValue prop to your valueState and on onhange function just clear the valueState

<Autocomplete

inputValue={valueState}

onChange={(value, option) =>
{


    setOptions([])
    setValueState("")

}}

renderInput={params => (
    <TextField
        dir="rtl"
        onChange={(event) =>
        {

            setValueState(event.target.value)

        }}
        {...params}
        label="Search Patient"
        variant="filled"

        InputProps={{
            ...params.InputProps,
            endAdornment: (
                <React.Fragment>
                    {loading ? (
                        <CircularProgress color="inherit" size={20} />
                    ) : null}
                    {params.InputProps.endAdornment}
                </React.Fragment>
            )
        }}
    />
)}
/>

Upvotes: 9

schaemi
schaemi

Reputation: 1

I had the same issue and I solved it with this :

const [value, setValue] = useState(null);

Then you don't need to use refs.

Upvotes: -4

fiidim
fiidim

Reputation: 157

I encountered a similar scenario using Autocomplete/Textfield in a Search/Nav bar. The value would always be left behind after using a history.push or other Router function in the onChange event. The trick is to set the inputValue = "" . Every time the component renders, the previous value will be removed. See below

<Autocomplete
  {...defaultProps}
  onChange={(event, value) => {
    if(value) 
      router.history.push(`/summary`);
  }}
  filterOptions={filterOptions}
  clearOnEscape={true}
  inputValue=""
  renderInput={params => <TextField {...params} 
                                    label="Quick Search"  fullWidth                            
                                    InputProps={{...params.InputProps, 
                                      'aria-label': 'description',
                                                disableUnderline: true, 
                           }}/>}
/>

Upvotes: 1

mlisonek
mlisonek

Reputation: 178

yo! I'm pretty sure the Textfield component from material takes an "autoComplete" prop, and you can pass that the string "false". Also, it does not go in inputProps, try that out.

<Textfield autoComplete="false" />

Upvotes: -2

Related Questions