[iOS] The selection is visible over editor UI

[Mgsy]

📝 Provide detailed reproduction steps (if any)

Edit: 15.09.2022

1. Go to https://ckeditor.com/docs/ckeditor5/latest/examples/builds/document-editor.html.
2. Create a non-collapsed selection at the beginning of the editable.
3. Open the headings dropdown.
4. Try to click on a dropdown item.

✔️ Expected result

It's possible to pick an option from the dropdown.

❌ Actual result

The native selection appears and it's impossible to pick an option from the dropdown.

📃 Other details

• Browser: Safari
• OS: iOS
• CKEditor version: Latest master

---

More examples:

• [iOS] Selection on ipad is on a z-layer above the menu dropdowns #7497
• [Mobile] - Cursor or text selection highlight remains above dropdown and other elements #11217

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[oleq]

This is a known bug in iOS. The only way to address this is by blurring the text field the selection is rendered in.

@ckeditor/qa-team  Can you confirm this happens less often since #11838? The editing root gets blurred now and the focus moves to the dropdown making the selection disappear.

[Mgsy]

@ckeditor/qa-team  Can you confirm this happens less often since #11838? The editing root gets blurred now and the focus moves to the dropdown making the selection disappear.

I can't reproduce this issue anymore, after opening the dropdown, the selection moves to it and is invisible in the editable.

[Reinmar]

This is awesome news :) I haven't thought about this side-effect of our recent changes.

[Mgsy]

Unfortunately, the issue still exists 😢 For the non-collapsed selection, after moving the focus to the dropdown, the native selection is invisible, but it appears again after clicking on a dropdown item.

I've edited the first post and added the image showing the problem.

[Witoso]

The current behavior is a bit different (iOS 16.5). The selection after opening the dropdown is not visible, but you still cannot select options. Sometimes it works when I bash multiple times on the screen or probably when the option is above the select (paragraph's case).
Recording:

RPReplay_Final1684741099.MP4

[Witoso]

Ideas:

• on the renderer level, remove DOM selection while editable is blurred.
• maybe there are some APIs that we could use?
• higher z-index on iOS on dropdown?

[oleq]

• on the renderer level, remove DOM selection while editable is blurred.

We actually do a similar thing in the link feature. The selection that you see on a link when you edit it is a fake marker. You can tell because the selection slightly changes its color and size depending on the OS when you open the link UI. We did that to maintain the UX. Otherwise, the selection in the editing root would disappear (DOM focus goes to the link UI) and, after a short while, it would be hard to tell what is getting linked and where.

This is not a system-wide solution, though (ATM only limited to links). But if we managed to have it available for all features, then we could control the z-index of the fake selection marker and probably work around the original issue. This would probably be handled on the global editor FocusTracker level: if the focus remains in the editor but not in the editing root, then render a fake selection.

• maybe there are some APIs that we could use?
• higher z-index on iOS on dropdown?

Sadly, this whole thing has nothing to do with z-index. Rendering the selection over everything is happening on the OS-level and there's nothing we can do about it in CSS.

[Witoso]

Scope:

• Extending the mechanism of fake selection (make it more generic and part of the core). The same for all browsers.
• Only iOS onBlur or always switch to fake selection when we move to some inputs?