Picker not responding to touch correctly inside Touchable

[robert-nash]

I am having an issue when using a Picker inside two TouchableWithoutFeedbacks. This setup means that the far right of the Picker component (around the caret) does not reliably respond to touch to bring up the picker dialog as it does when the Touchables are removed.

(The touchables are being used to detect a touch outside of a custom modal which closes the modal.)

React Native version: 0.57.1
React Native Environment Info:
System:
OS: Windows 10
CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
Memory: 10.71 GB / 19.88 GB
Binaries:
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.2.0.0 AI-181.5540.7.32.5056338

Steps To Reproduce

1. Place a picker component inside a TouchableWithoutFeedback inside a view which is itself inside another TouchableWithoutFeedback.
2. Touch the picker caret

Describe what you expected to happen:

I expected the picker dialog to appear when I clicked the caret.

Example showing this bug:
https://snack.expo.io/@robertnash/intelligent-mixed-nuts

[robert-nash]

This seems to be the same issue being faced here: GeekyAnts/NativeBase#1298

[oggktlmr]

I have the same problem like you just with some mobiles:

<TouchableOpacity>
  <View>
    <Picker></Picker>
  </View>
</TouchableOpacity>

I tried to use some tricks like these, but nothing: pointerEvents and onStartShouldSetResponder={()=>true}

In my case, the problem is the TouchableOpacity because if i don't use i can click the caret(arrow):

  <View>
    <Picker></Picker>
  </View>

The other issue is closed but not resolved.
@robert-nash Did you find any workaround?

[robert-nash]

Accidental close

[robert-nash]

Based on the comment by @oggktlmr it seems that this problem is actually less specific than I initially described. The problem seems to occur when the picker is placed inside a view inside the Touchable instead of directly inside the Touchable as shown here: https://snack.expo.io/@robertnash/authentic-candies

Does not respond correctly:

            <TouchableWithoutFeedback>
              <View>
                <Picker mode="dialog">
                  <Picker.Item label="Apple" value="apple" />
                  <Picker.Item label="Bannana" value="bannana" />
                  <Picker.Item label="Pear" value="pear" />
                </Picker>
              </View>
            </TouchableWithoutFeedback>

Responds correctly:

            <TouchableWithoutFeedback>
                <Picker mode="dialog">
                  <Picker.Item label="Apple" value="apple" />
                  <Picker.Item label="Bannana" value="bannana" />
                  <Picker.Item label="Pear" value="pear" />
                </Picker>
            </TouchableWithoutFeedback>

[oggktlmr]

This is so strange, i just test it with this structure now, and I can click the caret:

<TouchableOpacity>
  <View onStartShouldSetResponder={()=>true}>
    <View>
      <Picker></Picker>
    </View>
  </View>
<TouchableOpacity>

[tobi512]

@robert-nash @oggktlmr Any update?

Facing the same problem, took a while until I found this issue here.

For me, it seems to be completely random sometimes if a touch is taken or not, especially near the caret-arrow. On the left side of the Picker, the chance of a correctly handled touch is much higher, but also not always working. The whole issue happens only on a real Android device, emulator works fine and if I use a USB mouse with the device (connected via adapter) it also works flawlessly...

Extremely annoying, we are considering to build our own Picker with a custom view and a modal to present the picker items since we can't get this to work 😥

[tobi512]

Based on the comment by @oggktlmr it seems that this problem is actually less specific than I initially described. The problem seems to occur when the picker is placed inside a view inside the Touchable instead of directly inside the Touchable as shown here: https://snack.expo.io/@robertnash/authentic-candies

Does not respond correctly:

            <TouchableWithoutFeedback>
              <View>
                <Picker mode="dialog">
                  <Picker.Item label="Apple" value="apple" />
                  <Picker.Item label="Bannana" value="bannana" />
                  <Picker.Item label="Pear" value="pear" />
                </Picker>
              </View>
            </TouchableWithoutFeedback>

Responds correctly:

            <TouchableWithoutFeedback>
                <Picker mode="dialog">
                  <Picker.Item label="Apple" value="apple" />
                  <Picker.Item label="Bannana" value="bannana" />
                  <Picker.Item label="Pear" value="pear" />
                </Picker>
            </TouchableWithoutFeedback>

Just checked your snack: Both Pickers work with the device emulator in Expo, but not if you use a real device via Expo app and QR code, only the second one with the Picker directly in Touchable works on a real device for me.
@oggktlmr You proposal with onStartShouldSetResponder also does not work on a real device for me...

BTW: Expo always renders the Picker as a dropdown for me, even though the mode is set to dialog, is that the same for you?

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.