Downshift: Downshift producing empty input on blur if nothing is selected
downshiftversion: 2.1.4nodeversion: 10.7.0npm(oryarn) version: 6.1.0
Relevant code or config
Any usage of downshift. I assume this behaviours is on purpose.
What you did:
After opening a page using downshift I input text into the downshift-input but instead of selecting an item I blur this input (click somewhere on the page).
What happened:
After blurring the input it will be empty again.
Reproduction repository:
Downshift examples have this behaviour.
Problem description:
Actually whenever changing the text of the input without selecting an item but blurring, it will revert back to the text of the still selected item. In case no item is selected it will be empty. This is expected behaviour (normal
Suggested solution:
I think the best way to tackle this is to allow onStateChange to modify the changes (either changing the arguments object or returning a modified version). I would create a PR for this but wanted to pitch the idea in order to get feedback first.
Morton
All 2 comments
Hi @Morton,
Yes, this is intentional. If you disagree with the built-in behavior there are various ways to change it using the stateReducer or control props. Here's an example that may be helpful to you: https://codesandbox.io/s/github/kentcdodds/downshift-examples/tree/master/?module=%2Fsrc%2Fordered-examples%2F03-typeahead.js&moduleview=1
I'm 99% certain a stateReducer is what you're after. Good luck!
kentcdodds
on 6 Sep 2018
lol, I just realized that the typeahead example doesn't actually use a state reducer. It's even simpler than that. I hope it's helpful in any case :)
kentcdodds
on 6 Sep 2018
Related issues
lukyth
路
3Comments
klapouchy
路
4Comments
riax
路
4Comments
yuripramos
路
4Comments
kentcdodds
路
4Comments
Most helpful comment
Hi @Morton,
Yes, this is intentional. If you disagree with the built-in behavior there are various ways to change it using the stateReducer or control props. Here's an example that may be helpful to you: https://codesandbox.io/s/github/kentcdodds/downshift-examples/tree/master/?module=%2Fsrc%2Fordered-examples%2F03-typeahead.js&moduleview=1
I'm 99% certain a stateReducer is what you're after. Good luck!