Problem with Combobox with autocomplete and onBlur

[ycaoT]

The problem is : When a user uses the mouse to select an entry in the Autocomplete dropdown, the onBlur of the Combobox is automatically fired with the old value and the old value stays on the Combobox.

It's autocomplete Combobox, so users can type or select from dropdown list. I need to verify inputs after user input is done.

https://codesandbox.io/s/great-bhabha-8761h?file=/src/App.js

[nkrantz]

Hey @ycaoT! Thanks for linking the CodeSandbox reproducing the issue.

The reason you're seeing the old value logged when onBlur fires is because the Input gets blurred as soon as the dropdown gets clicked. It isn't until that dropdown item is selected that it becomes the new evt.target.value.

Because of this, we recommend using onInputValueChange instead of onBlur with Combobox. For more info, take a look at these Combobox docs and this CodeSandbox that Andi made to demo onInputValueChange.

Hope this helps!

[ycaoT]

@nkrantz The reason I do not want to use onInputValueChange is that, it does too much value computation (each time the input value changes). I want to only validate input value once when the input is done.

[gloriliale]

Hi @ycaoT! Another possible option is using onSelectedItemChange, a brief example of which lives here. Let us know if that's still not exactly what you're looking for- there might be more options in we could look for in Downshift, which is what our Combobox component is based around.

[ycaoT]

@gloriliale that does not work either. The user can either type or select from dropdown list, onSelectedItemChange does not get called when user typing is done.

[ycaoT]

I ended using Autocomplete component from material-ui. It provides a big benefit of differentiating inputValue and value, https://material-ui.com/components/autocomplete/#controllable-states; making it quite easy to handle and verify inputs.

[SiTaggart]

This is actually a bug in Combobox that should be a fairly simple fix, after looking into it this morning.

I'll post here again when it's been fixed. Sorry it took so long to discover.

[loreina]

Hi @ycaoT, thanks for your patience. We pushed a patch for this in 10.7.0.