React-native-picker-select: 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