Clicking the item doesn't toggle the select modal

bvanderdrift commented 3 years ago

Platform: Android 11
"react-native": "0.64.0"
"@react-native-picker/picker": "1.16.1"

Hi team!

I'm struggling with a situation where clicking the item in the picker doesn't show the select Modal. If I click on the area outside the item it does work. I've made the picker have height: 100 and backgroundColor: 'red' for visibility. See the gifs for the area that isn't clickable.

Jun-22-2021 17-23-27 Jun-22-2021 17-23-47 Is this a known issue? Am I missing something?

Renan-Olovics commented 3 years ago

Same issue here

Renan-Olovics commented 3 years ago

By the way, on ios its working just fine,

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo-google-fonts/raleway": "^0.1.0",
    "@expo/vector-icons": "^12.0.5",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@ptomasroos/react-native-multi-slider": "^2.2.2",
    "@react-native-async-storage/async-storage": "^1.13.0",
    "@react-native-community/blur": "^3.6.0",
    "@react-native-community/datetimepicker": "3.2.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^5.11.11",
    "@react-navigation/drawer": "^5.12.5",
    "@react-navigation/material-bottom-tabs": "^5.3.15",
    "@react-navigation/material-top-tabs": "^5.3.15",
    "@react-navigation/native": "^5.9.4",
    "@react-navigation/stack": "^5.14.5",
    "axios": "^0.21.1",
    "buffer": "^5.7.1",
    "eslint-config-standard": "^16.0.3",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.24.0",
    "expo": "^41.0.0",
    "expo-app-loading": "^1.1.2",
    "expo-av": "~9.1.2",
    "expo-blur": "~9.0.3",
    "expo-camera": "~11.0.2",
    "expo-document-picker": "~9.1.2",
    "expo-file-system": "~11.0.2",
    "expo-font": "~9.1.0",
    "expo-fontawesome": "^0.1.2",
    "expo-image-picker": "~10.1.4",
    "expo-linear-gradient": "~9.1.0",
    "expo-media-library": "~12.0.2",
    "expo-network": "~3.1.1",
    "expo-sqlite": "~9.1.0",
    "i18n-js": "^3.8.0",
    "jwt-decode": "^2.2.0",
    "lottie-react-native": "3.5.0",
    "moment": "^2.29.1",
    "native-base": "2.13.8",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
    "react-native-animated-loader": "0.0.8",
    "react-native-camera": "^3.44.3",
    "react-native-card-stack-swiper": "^1.2.5",
    "react-native-custom-radio-group": "^1.0.1",
    "react-native-deck-swiper": "^2.0.5",
    "react-native-dropdown-picker": "^5.1.23",
    "react-native-easy-content-loader": "^0.3.2",
    "react-native-elements": "^1.2.7",
    "react-native-fast-image": "^8.3.6",
    "react-native-flash-message": "^0.1.23",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-get-location": "^1.4.3",
    "react-native-gifted-chat": "^0.16.3",
    "react-native-image-view": "^2.1.9",
    "react-native-loading-spinner-overlay": "^1.1.0",
    "react-native-looped-carousel": "^0.1.13",
    "react-native-looped-carousel-improved": "^1.0.2",
    "react-native-maps": "0.27.1",
    "react-native-mask-loader": "0.0.3",
    "react-native-paper": "^4.9.2",
    "react-native-picker-select": "^8.0.4",
    "react-native-reanimated": "~2.1.0",
    "react-native-responsive-screen": "^1.4.2",
    "react-native-safe-area-context": "3.2.0",
    "react-native-safe-modules": "^1.0.3",
    "react-native-screens": "~3.0.0",
    "react-native-svg": "12.1.0",
    "react-native-svg-transformer": "^0.14.3",
    "react-native-svg-uri": "^1.2.3",
    "react-native-swiper": "^1.6.0",
    "react-native-tab-view": "^2.16.0",
    "react-native-vector-icons": "^8.1.0",
    "react-native-web": "^0.16.5",
    "react-native-web-swiper": "^2.2.1",
    "react-navigation": "^4.4.4",
    "react-navigation-drawer": "^2.7.1",
    "react-navigation-stack": "^2.10.4",
    "rn-range-slider": "^1.3.3",
    "socket.io-client": "^1.7.4",
    "tslib": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "babel-eslint": "^10.1.0",
    "babel-preset-expo": "8.3.0",
    "eslint": "^7.12.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.3.2",
    "schedule": "^0.4.0"
  },
  "private": true
}

Gildo-Sargi-Neto commented 3 years ago

have you tried adding the propertie "key" to the items of your picker?
something like in this print should work

bvanderdrift commented 3 years ago

@Gildo-Sargi-Neto thanks for the idea! We found another workaround in the meanwhile by using the package react-native-modal-selector instead. I sadly can't verify if that solution worked in my case. Curious to hear whether anyone else who is currently experiencing this problem has their issue solved by adding the key.

jbreuer95 commented 2 years ago

You can do this as a workaround:

Pseude code but i did something like this in my project and it works

const pickerRef = useRef();
<Pressable style={{ flex: 1 }} android_disableSound onPress={() => pickerRef.current.focus()}>
    <Picker ref={pickerRef} />
</Pressable>

react-native-picker / picker

Clicking the item doesn't toggle the select modal #285