Feature: Auto close picker on focus change

[JDMathew]

It would be great if there was a focus for the picker which when lost the picker auto closed

This would only work with single selections

[hossein-zare]

Please add more details, I'm confused 😶

when lost the picker auto closed

[JDMathew]

So if the user clicks on the picker it opens the dropdown if they then decide to not select an item from the list but click away, say into a textInput the dropdown remains open. It would be cool if when clicking away from the picker that the picker auto closed. i.e the picker is controlling some kind of focus and registers that the user has clicked away.

TextInput components have a onFocus and onBlur prop where you can run an action when the focus changes. Extending this concept I am wondering if it is possible to have a similar focus for the picker which then could auto close the picker when "onBlur" (focus is lost). I know this is probably wildly out of scope but just though it would be a nice feature.

[ddikodroid]

So if the user clicks on the picker it opens the dropdown if they then decide to not select an item from the list but click away, say into a textInput the dropdown remains open. It would be cool if when clicking away from the picker that the picker auto closed. i.e the picker is controlling some kind of focus and registers that the user has clicked away.

TextInput components have a onFocus and onBlur prop where you can run an action when the focus changes. Extending this concept I am wondering if it is possible to have a similar focus for the picker which then could auto close the picker when "onBlur" (focus is lost). I know this is probably wildly out of scope but just though it would be a nice feature.

can't you put the setOpen function on the onFocus props on the TextInput?

e.g

<TextInput onFocus={() => setOpen(false)} {...rest} />

[hossein-zare]

@JDMathew It's almost impossible to detect clicks outside a non-native component in ReactNative by a prop.

Here's a solution: https://github.com/hossein-zare/react-native-dropdown-picker/issues/349

Use TouchableOpacity with activeOpacity={1} or TouchableWithoutFeedback

[JDMathew]

That's what I thought and the touchable opacity is the solution I have used in the past with react-native-dropdown-picker but it is annoying as you also have to call close() on every interaction outside of the dropdown, i.e when the user clicks into another text field.

What I had done on a custom search dropdown component is I had a masked TextField which had the focus but was hidden from the user. This is also a hacky solution.

Will close this issue as it is a technical limitation.