search

facebook / lexical

Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
https://lexical.dev
MIT License
19.65k stars 1.67k forks source link

Bug: $getSelection works incorrectly on mobile devices (and chrome dev tools too) #5076

Open vicacid opened 1 year ago

vicacid commented 1 year ago

When using $getSelection, I'm experiencing varying results on mobile and desktop platforms. I have added plugin and registered a handler for the CLICK_COMMAND event, where I retrieve the selection using $getSelection. However, I've noticed that the behavior differs between mobile and desktop environments. When clicking inside the editor I expect having range selection with the same anchor and focus nodes and offset 0, but when use editor on mobile device - get null instead of selection.

Lexical version: 0.12

Steps To Reproduce

  1. Open example: https://codesandbox.io/s/lexical-tst-w4thjq (desktop)
  2. Click "Paragraph 1" text in the editor
  3. Click "Paragraph 2" text in the editor
  4. Open dev tools with mobile view and refresh the page.
  5. Click "Paragraph 1" text in the editor
  6. Click "Paragraph 2" text in the editor

Link to code example: https://codesandbox.io/s/lexical-tst-w4thjq

The current behavior

Red container with node key does not appear on first click and uses previously clicked nodes keys.

The expected behavior

Should see node keys in the the red container: "8" and "10" sequentially after each click.

Desktop: https://github.com/facebook/lexical/assets/16975535/80e95d47-bbcb-4ee3-ab05-1c7858597dc3

Mobile(Chrome dev tools): https://github.com/facebook/lexical/assets/16975535/eed2ff69-0cc3-4df9-9606-669c99115e59

Benbinbin commented 10 months ago

v0.12.4 has the same problem, I can get the "real" selection can get from $getPreviousSelection() in touch device, but this selection is read-only, so I can't modify it