Android: Firefox and Chrome TextInput onSelectionChange events differ

[AndreasBBS]

Is there an existing issue for this?

• [X] I have searched the existing issues

Describe the issue

Using a TextInput in Firefox on Android, when the cursor is dragged, the onSelectionChange is not triggered with the new selection values.

Chrome/Brave:

https://user-images.githubusercontent.com/12399440/200190417-350ce866-00b0-4cb9-8bd7-c81ddee58a83.mp4

Firefox:

https://user-images.githubusercontent.com/12399440/200190428-dc203bb7-fde9-49ee-8c9d-24c4ed00d19c.mp4

Expected behavior

I expect Firefox to behave the same as Chrome

Steps to reproduce

NPM versions: react: 17.0.* react-dom: 17.0.* react-native-web: 0.18.*

Browser: Firefox for Android

1. Access an App using a TextInput
2. Write some text in the text input
3. Drag the cursor to a different position within the test
4. Observe that the onSelectionEvent is not triggered as the cursor is being dragged

The codebox example I'm attaching makes it really easy to test this phenomenom

Test case

https://codesandbox.io/s/icy-pine-5tbtxj

Additional comments

No response

[necolas]

This seems to be a Firefox Android bug based on what is said here https://github.com/Expensify/App/issues/12298

[AndreasBBS]

@necolas I found this out: https://github.com/Expensify/App/issues/12298#issuecomment-1304883357

It looks to me that the Firefox engine does approach this selection issue but in a different way than the Chrome engine. How does this library normalize across different engines behaviors?

[AndreasBBS]

The onSelectionChange in the TextInput component is listening to the event 'selectionchange' on Document.

Firefox is the only browser that seems to implement correctly the behavior where the 'selectionchange' event is triggered on the input element.

There is already a bug opened on chrome for this: https://bugs.chromium.org/p/chromium/issues/detail?id=1327098

You can also see here that the list of browsers with compatibility for this feature is currently only Firefox but as more browsers adopt it this bug will only become more common.

[AndreasBBS]

@necolas I've been digging deeper on this bug and I found out that this extends to React. I took a look at this package code and found out that onSelectionChange handler is simply passed to the input's onSelect which is handled by React. I tested this behavior with React's onSelect and figured out it also happens there. I opened this issue in case you're interested in following this. I think nothing needs to be changed in this lib, it does the right thing, it's React that needs to handle the onSelect situation better. I'm closing this issue. Sorry for wasting your time, I should have investigated this better before opening this.

[necolas]

Thanks for all the investigation. I'd like to keep this open because we could still implement a fix using native event listeners instead of React DOM's event disturb