CODEWITHSUNDEEP
reactjsmaterial-ui
Gavin
Gavin

Reputation: 115

Handle click and change on Autocomplete Component from material ui

I have been trying to get an autocomplete component to save the state when a user types and clicks an item from the autocomplete list. I'm trying to filter my table using this state. Currently my table is filtering as data is typed into the text field but not when an item is clicked.

Here is my Autocomplete and TextField:

enter image description here

Here is my Table:

enter image description here

Here is my interface:

enter image description here

Any help would be great guys, thanks

Upvotes: 1

Views: 5358

Answers (1)

Richard Hpa
Richard Hpa

Reputation: 2857

You should move your onChange event from the textarea to the Autocomplete itself. Having it filter as you are typing is probably not the best idea as it will be happening as you type but you probably want it to happen when you actually select an option.

Having the autoSelect property will also help with if you type the name of the country without selecting it.

<Autocomplete
   onChange={(event, newValue) => {
      setSearchTerm(newValue)
   }}
   autoSelect
/>

Upvotes: 3

Related Questions