Select won't close on iOS

[danecando]

Describe the bug

Select window doesn't close when clicked outside or done is pressed.

To Reproduce

Create a simple select box and try to use it.

Expected behavior

Select View should close and onDonePress should be called when clicked

Screenshots

Additional details

• Device: iPad 7th Gen Emulator
• OS: iOS 13.3
• react-native-picker-select version: 6.3.3
• react-native version: 0.61
• react version: 16.9
• expo sdk 36

Reproduction and/or code sample

Unfortunately it works in an expo snack so I haven't figured out why it isn't working my project environment. Hopefully it's not just me and someone can point me in the right direction.

[papidb]

It isn't just you. Plese does this have a solution. I haven't been able to complete my project because of this.

[gamezinfantes]

I don't know why but setting the Picker height 1 unit less than the modalViewBottom and adding overflow hidden solves the problem.

<RNPickerSelect pickerProps={{ style: { height: 214, overflow: 'hidden' } }} />

[papidb]

Will try this now. Thanks in advanced!

[mattmattvanvoorst]

I'm experiencing the same issue. I'm at the point where I have built my own toggle and my own modal, importing the default Picker component from react-native. However I seem to be able to reproduce the same bug outside of this package. It seems the Picker covers the entire screen somehow, and catches any and all interaction.

It might have to do with some weird picker-in-modal interaction. If anyone finds a solution, I would be happy to hear it.

[adrianso]

I created #274 to address the issue.

[maharjanaman]

@gamezinfantes What version are you on? I tried your workaround but don't seem to work. I'm on version 6.6.0.
Also, are there any other workaround?

[lfkwtz]

just spun up a brand new app.

react 16.11
react-native 0.62.2
react-native-picker-select 7.0.0

ran with react-native run-ios '--simulator=iPad (7th generation)'

not seeing the issue.

seems to be a legit issue based on the activity here - but someone will need to provide me with a reproduction.

[maharjanaman]

@lfkwtz Can you try it in expo? @danecando seems to be on expo and I too am using expo sdk 35. Besides that, I'm connecting it with redux-form.

[lfkwtz]

just tried expo - worked fine. i'll need a repro on this.

[maharjanaman]

Mine was on expo sdk 35.0.0 and with version 6.1.0 of react-native-picker-select. I upgraded to latest react-native-picker-select but there was still an issue.

[lfkwtz]

then please share code since you are able to reproduce it

[maharjanaman]

@lfkwtz as I said that I'm connecting it to redux-form, so here is how I implemented it

import React from "react";
import { View, StyleSheet, Text } from "react-native";
import RNPickerSelect from "react-native-picker-select";
import { Feather } from "@expo/vector-icons";
import PropTypes from "prop-types";

import { Colors, ConstStyles } from "../../constants";

const pickerSelectStyles = StyleSheet.create({
  inputIOS: {
    fontFamily: "workSansRegular",
    fontSize: 16,
    height: 75,
    borderWidth: 1,
    borderColor: Colors.munsell,
    borderRadius: 5,
    backgroundColor: Colors.munsell,
    paddingHorizontal: 20,
    paddingRight: 35,
    color: Colors.darkest
  },
  inputAndroid: {
    fontFamily: "workSansRegular",
    fontSize: 16,
    height: 75,
    borderWidth: 1,
    borderColor: Colors.munsell,
    borderRadius: 5,
    backgroundColor: Colors.munsell,
    paddingHorizontal: 20,
    paddingRight: 35,
    color: Colors.darkest
  }
});

const PickerSelect = ({
  items,
  height,
  containerStyle,
  showIcon,
  customIconContainer,
  input: { value, onChange },
  meta: { touched, error },
  ...custom
}) => (
  <View style={[{ paddingVertical: 5 }, containerStyle]}>
    <RNPickerSelect
      style={{
        ...pickerSelectStyles,
        inputIOS: {
          ...pickerSelectStyles.inputIOS,
          height,
          borderWidth: touched && error ? 2 : 1,
          borderColor: touched && error ? Colors.lightRed : Colors.munsell
        },
        inputAndroid: {
          ...pickerSelectStyles.inputAndroid,
          height,
          borderWidth: touched && error ? 2 : 1,
          borderColor: touched && error ? Colors.lightRed : Colors.munsell
        },
        iconContainer: {
          top: height === 50 ? 10 : 20,
          right: 10,
          ...customIconContainer
        }
      }}
      items={items}
      value={value}
      onValueChange={onChange}
      Icon={() => {
        return showIcon && <Feather name="chevron-down" size={30} color={Colors.light} />;
      }}
      {...custom}
      useNativeAndroidPickerStyle={false}
    />

    {touched && error && <Text style={ConstStyles.errorText}>{error}</Text>}
  </View>
);

export default PickerSelect;

PickerSelect.propTypes = {
  items: PropTypes.instanceOf(Array),
  input: PropTypes.shape({
    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    onChange: PropTypes.func
  }),
  meta: PropTypes.shape({
    touched: PropTypes.bool,
    error: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
  }),
  height: PropTypes.number,
  containerStyle: PropTypes.shape({}),
  showIcon: PropTypes.bool,
  customIconContainer: PropTypes.shape({})
};

PickerSelect.defaultProps = {
  items: [],
  input: {},
  meta: {},
  height: 75,
  containerStyle: {},
  showIcon: true,
  customIconContainer: {}
};

And here is piece of redux-form code

<Field
  key={index}
  name={specificPosition}
  items={pickerItems}
  component={PickerSelect}
  placeholder={{
     label: "SPECIFIC POSITION",
     value: null
 }}
 placeholderTextColor={Colors.taupe}
/>

Hope this helps.

[Arwantys]

some problem

[KristenKatona]

Any updates here? The suggestion for a workaround only resolves the issue for one of my pickers and it breaks the whole thing on Android.

[lfkwtz]

if someone can share a full repro with me, i'd be happy to look into it. @KristenKatona i'm especially curious why this would only fix one of your pickers - what is unique about it?

[KristenKatona]

@lfkwtz the picker it did NOT fix (on iOS only) was within an extra nested view vs the one that did work. I just removed that extra inner view and it worked. I didn't use the suggestion here at all, I just removed that extra inner view.

[rickysullivan]

Having the same issue. Example snack: https://snack.expo.io/@ptgodev/nervous-chocolate

Expo client on iOS Simulator. iPhone 8, 13.3.

[lfkwtz]

@rickysullivan just pulled that down and ran on expo-cli with iPhone 8

[rickysullivan]

Which cli version?

[lfkwtz]

3.20.9

[rickysullivan]

Expo client app or did you build a standalone?

[lfkwtz]

client

[rickysullivan]

Client version?

[lfkwtz]

2.15.4.10229

[rickysullivan]

Sim: iPhone 8 @ iOS 13.3
Expo client: 2.15.4.10229

[rickysullivan]

Strange, my actual project is now working.

[randomBrainstormer]

I'm facing this issue as well, I've placed console log in the code in line 343 corresponding to the onPress of the "Done" button, it seems the onPress event never gets triggered, by such the modal is never dismissed. Why wouldn't a TouchableOpacity trigger the onPress event but trigger others?.. what is even more strange is that this issue went away without me modifying anything, it just goes and comes, is difficult to figure what is causing this behaviour.

Edit: only the onPress event was not triggering, others as onPressIn or onPressOut found in the same TouchableOpacity component were being triggered.

[SmirnovM91]

any solutions?

[micnguyen]

Seeing this issue as well.

RN: 0.62.2
"react-native-picker-select": "^7.0.0",
No Expo

[lfkwtz]

if you’re seeing this issue, please provide a repro

[ddallagnese]

I had this issue today. My project was working fine yesterday, and today I faced the issue.
As it seems to be a bug, I closed the project, removed node_modules and yarn.lock, reinstalled again and restarted the project. It's working again.
I hope it can help.

"react-native": "0.62.2",
"react-native-picker-select": "^7.0.0",

[sarahheimerdinger]

I was also using the workaround:

 pickerProps={{
                style: {
                  height: 200,
                  overflow: 'hidden',
                  backgroundColor: 'red',
                },
              }}

until today when it stopped working -__- I added a background color and realized that i had changed 'height: 200' to height: 'RFValue(200)' and caused the height of the picker to overlap the done button. ss attached show height at 200 vs RFValue(200)

[nromera273]

I'm solved the problem with
style={{ modalViewBottom: { height: 220 },

[frost4869]

I got the same problem when using the picker inside a Modal, created by react-navigation.

I discovered that apparently the picker itself is overlapping with the "Done" bar just a tiny bit, but enough to mess up the whole thing. So I tried to change the height of it just a little bit and it worked.

pickerProps={{ style: {height: '99%', overflow: 'hidden'} }}

crazy

[Nikolay-Vovk-dataart]

Hey guys. also faced this issue on iOS simulator. Then tried to install on a device - its working fine. Then tried to reinstall on the simulator (with restarting it) - it is working again

Hope it help for somecases

[taraschuiko]

I don't know why but setting the Picker height 1 unit less than the modalViewBottom and adding overflow hidden solves the problem.

<RNPickerSelect pickerProps={{ style: { height: 214, overflow: 'hidden' } }} />

It's not selecting the last value now, but it's not closing the select window.

[MohamedHedar]

All you need to restart your simulator

[Gabrielfcs]

All you need to restart your simulator

It works, but the right thing was not to need it 🥴

[upngo]

I only get this problem when I'm using the iOS simulator. Running on a real device doesn't have this issue for me

[code-creativeapps]

All you need to restart your simulator

Thank you
And F*** RN, and mobile development.