React Material UI Autocomplete event listener issue

Question

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!

• hangindev.com: Hi @Georg, the sandbox you provided work just fine for me. When I type "Ba" and tab, but value and inputValue are set to "Banana"? I am using Google Chrome.
• Georg: Hi @Hangindev, thanks for the quick reply. Sorry, I probably wasn't very clear. The value and inputValue behave fine for me too on Google Chrome. However, the console logs of the various e.targets and e.target.values are not giving me what I am after. Essentially I am trying to pass what is in value/inputValue inside the e I pass to a handleChange function.
• hangindev.com: I see. Thanks for the clarification. May I know why do you want to use e.target.value instead of the value parameter in the onChange function?
• Georg: I have a handleChange function that takes e as one of the arguments. e.target.name and e.target.value are then used to update state in another component.
• hangindev.com: I see. Since the value parameter is the value you want, my suggestion is to either create an object that fit handleChange's signature with the value parameter, e.g. { target: { name: e.target.name, value: newValue } } or update the handleChange function. Hope you can find a solution eventually or others can help!

Answer 1

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.