slate icon indicating copy to clipboard operation
slate copied to clipboard

Published 20 hours ago • verified publisher icon ianstormtaylor

Inline void selection and cursor placement issues on iOS

Open josephmr opened this issue 1 year ago • 1 comments

Description There are a few issues with selection and moving the cursor in/around inline void elements on iOS (tested both Chrome and Safari).

  1. When selecting text then adjusting your selection with the blue selection pips:

    • Starting with selection before inline void and expanded past works as expected
    • Starting with selection after inline void and expanding backwards over the inline causes the selection to disappear

  2. When scrubbing cursor placement by holding space bar:

    • Scrubbing through an inline void element has very inconsistent behavior. Generally the cursor disappears, continuing to scrub around may sometimes escape or start a random selection.

Both of these behaviors seemed to work decently well and as expected on Android (using Chrome).

Recording

  1. Showing working going forward, then broken going backward:

https://user-images.githubusercontent.com/28637598/231021837-8b5df989-ab51-4249-b762-9627b925e2a4.mp4

  1. Showing inconsistent behavior:

https://user-images.githubusercontent.com/28637598/231022006-a03fa4c3-23fe-4749-b546-41400de1f3ba.mp4

Working (mostly anyway -- cursor scrubbing is very smooth, moving selection is less so but still functional) on Android:

https://user-images.githubusercontent.com/28637598/231023337-f41d3603-a2b0-46d6-b2e5-63ec454f8995.mp4

Sandbox This can be reproduced using the current live mention example: https://www.slatejs.org/examples/mentions

Steps To reproduce the behavior:

  1. Go to mention example on iOS
  2. Click on some text after a mention to begin a selection
  3. Drag the beginning of the selection backwards over the mention
  4. See selection disappear

Expectation The iOS selection behavior should be consistent with the Android behavior in the video above. Selections should seamlessly go across inline void elements. Additionally, scrubbing the cursor across should not get stuck and should not start selections.

Environment

  • Slate Version: 0.93
  • Operating System: iOS
  • Browser: Chrome, Safari

josephmr avatar Apr 11 '23 00:04 josephmr

It seems like this is an iOS bug as I can reproduce with the following plain html:

    <body>
        <div contenteditable>
            hello world <span contenteditable="false">@username</span> this is a test!
        </div>
    </body>

Would love to hear if anyone has any workarounds for this issue or if there is a known upstream bug tracking this behavior.

josephmr avatar Apr 11 '23 18:04 josephmr