Controlling what happens onBlur

[jamestalmage]

If the user tabs out of the drop down, it always selects the last selected item - even if they've completely typed out a different value.

I think it would be beneficial to add another function that deals with what to do when the focus leaves the component (either because of tabbing out or clicking outside). I am looking at using it in two different spots, and in one case I want to just select the first prediction on blur, in another - I want to just leave what they typed.

[jamestalmage]

Notice how it reverts to "Foo", even though I've typed out "Food"

[hungrymonkey]

I believe you did not create any boundaries for your last item. Even if you click outside, it will select the last element.

If you were clicking outside, Downshift should reset by triggering the mouseUp state
.
To change the default behavior of clicking outside, you need to modify the stateReducer
https://github.com/paypal/downshift#statereducer

I do not know how to tab out.

[jamestalmage]

Looks like I can figure out what I want to do with stateReducer.

Only pain point is that there is no access to highlightedItem (i.e. - that's not a property that is recorded in the state).

It seems like you could capture the currently highlighted option when they call getItemProps.

[kentcdodds]

I think the workarounds are sufficient for this scenario. Make sure to checkout this example as well: https://codesandbox.io/s/github/kentcdodds/downshift-examples/tree/master/?module=%2Fsrc%2Fordered-examples%2F03-typeahead.js&moduleview=1