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.

some problem