Close iOS Select when selection is made

[zolrath]

@alvaromb mentioned he'd take a pull request for this in #265
Currently, when presenting an enum in the form the default template provides a Picker on iOS.
This picker stays open after the user selects an option instead of automatically closing.

This pull request closes the picker 500ms after the user stops interacting with the Picker.
It detects pans on the View surrounding the Picker to ensure it doesn't close if the user is still panning the Picker after a selection is made, be it they are scrolling lower in the list or simply hovering over options.

[zolrath]

Actually, if you tap the field to close it before it autocloses, it will automatically open back up.
I'll separate the onPress toggle and the autoclose functionality into more appropriate togglePicker and closePicker functions to correct the issue soon.

[zolrath]

With togglePicker and closePicker extracted into separate functions this now operates as I would expect and should be ready you @alvaromb!

[NotTooReact89]

can you please give me an example of how this works?

[zolrath]

It implements the behavior requested by #265.
Currently on iOS if you have a field with multiple options the Select list behavior is a bit unexpected.
You tap on the select list, it expands, and once you tap on an option the select list remains open.
In order to close the select list after picking your option, you need to click on the top of the select list again to close it.

This PR makes it so after tapping on an option the Select list closes itself automatically after 500ms.
If the user taps on another option or starts dragging the list before the 500ms have passed it will reset the timer so it doesn't disrupt scrolling through longer lists but allows for the behavior to be more like the Android select list.

[NotTooReact89]

sorry if i was not too clear on what i was asking. I have a form with the below select so what attribute should I use/how do i make use of this?

const SelectItems = t.enums({
Option1: 'Option 1',
Option2: 'Option 2'
}, "Select option");

SelectItems.getValidationErrorMessage = function () {
return 'Please select an option';
};

[ghost]

I'm hoping this to get merged and released soon! Thanks

[pedroeusebio]

Nice solution !! worked like a charm, thanks @zolrath !

[otaviogaiao]

Thank you so much man. It works perfectly. I have spent hours trying to fix the behaviour of the select component. But your code fixed everything. This should be already merged.

[alvaromb]

Will merge this today, sorry for the delay.

[alvaromb]

Sorry @zolrath, could you please solve conflicts? There have been some deep changes in that picker

[tonycoco]

#507 also fixes this

[alvaromb]

@Moreno97 can you solve the conflicts for this PR?

[macrozone]

@zolrath any chance to get this merged soon?

[otaviogaiao]

@macrozone this PR has been open for so long and its something so important.. I think you should just fork the project and accept it yourself. Thats what I did, and its working great

[alvaromb]

Landed in: #527

Sorry for the delay, I didn't have time to look into this since today.