CODEWITHSUNDEEP
javascriptreactjsautocompletematerial-ui
Georg
Georg

Reputation: 25

React Material UI Autocomplete event listener issue

I am trying to set up Material UI's Autocomplete component so that when you hit tab it will automatically select the closest match. Based on the input I then need to capture the e.target.value. However, it only seems to pass the string that is manually entered without the autocompleted string. For example, if I type "Ba" and tab to complete to "Banana" only "Ba" is passed as the value. Here is a sandbox of what I am trying to implement.

I also realise that when I click to use the dropdown menu (instead of manually entering values via keyboard) it fails to even create the value I am after. Any help on this is also very much appreciated. Thank you!

Upvotes: 0

Views: 1156

Answers (1)

hangindev.com
hangindev.com

Reputation: 4883

You may either create an object that fit handleChange's signature with the valueparameter of the onChange function, i.e. 

<Autocomplete
  onChange={(event, value) => {
    handleChange({
      target: {
        name: event.target.name,
        value,
      },
    });
  }}
  ...

or update the handleChange function.

Upvotes: 2

Related Questions