search

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

Android: Firefox and Chrome TextInput onSelectionChange events differ #2422

Open AndreasBBS opened 1 year ago

AndreasBBS commented 1 year ago

Is there an existing issue for this?

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 commented 1 year ago

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

AndreasBBS commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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