How to remove selected value when click button of Autocomplete Material UI?

Question

I'm using autocomplete of material-ui, and trying to delete selected value whenever click a button but can not find any way to do that. Any idea?

            <Autocomplete
              className={classes.techListBox}
              disableCloseOnSelect={true}
              multiple
              options={this.props.displayProject.techList}
              getOptionLabel={options => options.title}
              defaultValue={this.props.displayProject.techName}
              onChange={(e, techs) => {
                this.formatTechID(techs);
              }}
              renderInput={params => (
                <TextField
                  {...params}
                  variant="outlined"
                  placeholder={t("tech")}
                  margin="normal"
                  fullWidth
                />
              )}
            ></Autocomplete>```

Renaldo Balaj · Accepted Answer · 2019-12-01 16:18:57Z

6

You will need to set the value(a state) and the onChange event at Autocomplete:) when you click the rest button it will just reset the state :)

   const [value, setValue] = React.useState(null);
   <Autocomplete 
    value={value}
    onChange={(event, newValue) => {
      setValue(newValue);
    }}
   >

   <button onClick={() => setValue(null)}>Reset autocomplete</button>

I made a working demo for you: https://codesandbox.io/s/material-demo-zqz4v

Comment down for more questions :)

edited Dec 1, 2019 at 16:18

answered Dec 1, 2019 at 15:39

Renaldo Balaj

2,45014 silver badges24 bronze badges

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

2 Comments

randomguy Over a year ago

I don't think this work when select multiple. I stored select value, and i can set store to null, but can not remove it in screen. How can I do that. And sorry for my English

Renaldo Balaj Over a year ago

It will work for multiple too :) but now you will array and not a basic variable. Click in the link I provided FULL DEMO , you have the example there where it is removed ;) Feel free to UPVOTE + accept the answer

Collectives™ on Stack Overflow

How to remove selected value when click button of Autocomplete Material UI?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related