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

[RichardLindhout]

The problem

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?

• React Native for Web (version): 0.13.8
• React Native: 0.63.2
• React (version): 16.13.1
• Browser: Google Chrome

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]

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]

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]

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]

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