Picker on iOS selects an item and closes the drawer before Done button is clicked

[milennaj]

Describe the bug
Picker on iOS selects an item in the list and closes the drawer before button Done is clicked.

To Reproduce
You can see it in this simple example: https://snack.expo.io/@betabit/react-native-picker-select

Select picker, scroll to choose second item. Drawer will be closed before Done button is clicked.

Expected behavior
Selection of the item should be after button Done is clicked, and only then should the drawer close.

Screenshots
n/a Additional details

• Device: iPhone7 ,(also iPhone X)
• OS: iOS 13.5.1
• react-native-picker-select version: ^8.0.2,
  • @react-native-community/picker: 1.6.6,
• react-native: "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz"
• expo sdk version: 39

Reproduction and/or code sample

https://snack.expo.io/@betabit/react-native-picker-select

[ArianHamdi]

@milennaj same problem ! i could fix it by remove key prop on RNPickerSelect component

[milennaj]

Removing the key is not a solution since then we will get a warning: Cannot update component inside function and issue: https://github.com/lawnstarter/react-native-picker-select/issues/346

[ArianHamdi]

@milennaj
I got this warning when I tried to set a value that is not available in the items list

[milennaj]

@ArianHamdi yes, that was the problem. Initially in the code we were setting the value to the object that isn't in the list. Thank you.

[JavierL1]

Hi I have the same issue, and removing the key prop doesn't solve it in my case since from the begining it wasn't set. 😞

[milennaj]

This issue is still present on version 8.0.3. If you have the key prop on iOS drawer will be closed as soon as item is selected, not clicking on Done button.

[theambidextrous]

@ArianHamdi yes, that was the problem. Initially in the code we were setting the value to the object that isn't in the list. Thank you.

Hi, Mine is not key prop issue, infact the key prop is not set.

But what i noticed is as follows:

if i set onValuechange prop to log to console it works but setting the value to state function fails .. drawer closes before clicking on done

Works:

<RNPickerSelect
            onValueChange={(val) => {
              console.log(val);
            }}
            placeholder={{label:"Select one", value:"Select one"}}
            value={data.state}
            style={pickerSelectStyles}
            items={states}
            Icon={() => {
              return <Icon size={20} name="ios-arrow-down" color={colors.black} />;
            }}
        />

Does not work:

<RNPickerSelect
            onValueChange={(val) => {
              setData({
                ...data,
                state: val,
              });
            }}
            placeholder={{label:"Select one", value:"Select one"}}
            value={data.state}
            style={pickerSelectStyles}
            items={states}
            Icon={() => {
              return <Icon size={20} name="ios-arrow-down" color={colors.black} />;
            }}
        />

[harmonikas996]

I can confirm that getting rid of the key prop resolved my issue.

[jehajj]

Same here key prop solved the issue

[adeyemosamuel]

Removing the key prop resolved my issue.

[wgsquayson]

any updates on this issue? i don't even use the key prop

[theambidextrous]

any updates on this issue? i don't even use the key prop

For my case.. i was creating a separate function with the picker, then calling it in render.. all i did was to use the picker component inside the render directly...

[wgsquayson]

@theambidextrous did it work? can u give me an example?

[wgsquayson]

i have a separate component with the Picker already