necolas / react-native-web

Cross-platform React UI packages
https://necolas.github.io/react-native-web
MIT License
21.64k stars 1.79k forks source link

PointerEvents="none" not working as expected on text elements #1741

Closed RichardLindhout closed 4 years ago

RichardLindhout commented 4 years ago

The problem ezgif-7-69f064634e14

I'm building a time picker component for React Native Paper with the PanResponder (which works great on the web!) But I would expect the pointerEvents="none" to prevent the children from selecting text. But it does not. On iOS and Android text selection does not work in views with pointerEvents="none" even when the selectable={true} is used on

How to reproduce

Simplified test case: https://codesandbox.io/s/bold-shape-efdkb?file=/src/App.js

Steps to reproduce:

  1. Click twice on the button
  2. Text get selected while on Android/iOS it won't be selectable (even with selectable={true} on the Text

Expected behavior

I think we should add userSelect: 'none' (https://developer.mozilla.org/en-US/docs/Web/CSS/user-select) to the css when pointerEvents="none" is used. This way text inside buttons won't be selected if they have the pointerEvents disabled

Environment (include versions). Did this work in previous versions?

Additional context https://github.com/necolas/react-native-web/blob/9ed9231b04ae495718e76749036ca3cd2a81eb80/packages/react-native-web/src/modules/createDOMProps/index.js#L38 https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/compile.js#L150

RichardLindhout commented 4 years ago

I just forgot about selectable={false} on elements which is implemented already! However it would still be nice to have the same behaviour on the web but less important as I first thought :)

necolas commented 4 years ago

That's right, you can disable text selection as needed. I think React Native gets text selection wrong by default and produces inaccessible experiences, especially on web. It looks like it also has a different relationship between pointerEvents and text selection behavior, and the fact that you cannot select text within a tree that has no pointer events looks to me like a bug in React Native. So I don't think it's worth changing RNWeb

One thing we should do though, is make it so that this works:

<Text selectable={false}>Some <Text selectable={true}>text</Text></Text>
RichardLindhout commented 4 years ago

I agree this is more or less a bug in React Native!

-> on the nested text

I did a little expirement: user-select: text; works fine but user-select: auto; not. I'll make a PR for this

RichardLindhout commented 4 years ago

Closing this as for nested elements there is a PR up: https://github.com/necolas/react-native-web/pull/1742.

But maybe we could document this differente somewhere for library owners so they can make web support better (e.g. set selectable={false} inside elements on buttons