search

mrzachnugent / react-native-reusables

Universal shadcn/ui for React Native featuring a focused collection of components - Crafted with NativeWind v4 and accessibility in mind.
https://rnr-docs.vercel.app
MIT License
3.71k stars 154 forks source link

[ BUG ] SelectTrigger does not work when using on a mobile web browser #274

Closed kilbot closed 2 days ago

kilbot commented 6 days ago

Describe the bug SelectTrigger does not work when using on a mobile web browser

To Reproduce Steps to reproduce the behavior:

  1. Open Select demo: https://rnr-showcase.vercel.app/select
  2. Go into mobile device (touch) mode in the developer console
  3. Try to open a select dropdown

Expected behavior SelectTrigger should work on mobile browsers.

Screenshots output

Platform (please complete the following information):

Additional context This is not a problem with the react-native-reusables reusables library itself. The issue is due to this line of code in Radix UI. The event.pointerType is 'touch' and so the handleOpen is never triggered. The Radix UI Select demo does work on mobile browsers, so I suspect this has something to do with the way react-native-web handles Pressable events.

Perhaps it we need to handle onPointerDown events ourselves to make it compatible with Radix UI?

mrzachnugent commented 4 days ago

As a temporary workaround, you can trigger the select to open with its ref. You can use this as a reference: https://github.com/mrzachnugent/react-native-reusables-nextjs-demo/blob/main/src/components/ui/select.tsx#L35

kilbot commented 2 days ago

Thanks. Explicitly calling the trigger open in onPress seems to work fine.

This issue only effects the Select trigger (ie: the Popover trigger works fine). Reading through the developer comments in the Radix UI select component, it seems that they have a reason for preventing touch, so I think this is fine solution for those that need to support mobile browsers.

Thanks for your work on react-native-reusables, it's helped me greatly when transitioning my old component library from styled-components to nativewind.