Downshift: onInputValueChange fire when tabbing out of input

[riax]

• downshift version: 1.22.5
• npm (or yarn) version: Yarn 1.0.2

Relevant code or config

https://codesandbox.io/s/w61oovz4v5

What you did:

1. Write some text in the input
2. Press TAB key

What happened:
onInputValueChange fire with empty value.

Problem description:
Since the value has not changed this cause problems. Also the empty value provided is incorrect.

Suggested solution:
Do not fire onInputValueChange on TAB since the value has not changed

[kentcdodds]

Hi @riax,

Sorry, but when the blur event fires on the input, reset gets called which will reset the inputValue to the itemToString value of selectedItem. When that happens, the inputValue is changed and hence we call onInputValueChange. Does that make sense?

If you don't like this behavior, you can change it by adding an onBlur handler in getInputProps and call event.preventDefault() in your own blur handler. Like this: https://codesandbox.io/s/vjzk7rnwm3

Good luck!

[venikx]

Hi @kentcdodds!

It makes sense in the way I understand why it gets reset, however I'm not sure if it makes sense to have the behaviour. What was the reasoning behind resetting the inputValue onBlur (maybe I can understand it better when I know the reason why inputValue gets reset onBlur).
The example seems to be behaving the exact same way as the @riax's Issue.

I totally get Downshift is resetting the input onBlur, because now that I've seen it in place vs not resetting I actually like the reset onBlur behaviour more than keeping the inputValue as is.
If I fire onBlur when I'm typin, it usually means I want to cancel the autocomplete.

The catch is when using itemtoString. Always make sure you are returning a string, either an empty string, but don't send null/undefined as makes the input uncontrolled and reset won't happen.
Sorry for the rubber ducking on this issue!

Nice work with the library though, really helped that autocomplete behaviour 💯

[kentcdodds]

Glad you got it worked out :)

[esamattis]

I was looking for the same thing and I came here from Google but it seems that the preventDefault() solution does not work anymore in 3.2.10.

But it is also preventable using the state reducer:

         stateReducer={(state, changes) => {
                // Do not clear search input content on blur
                if (changes.type === Downshift.stateChangeTypes.blurInput) {
                    return state;
                }

                return { ...state, ...changes };
            }}