Case ce-0014 · Scenario scenario-nested-contenteditable

Nested contenteditable elements cause focus and selection issues

OS: Any Ubuntu 22.04 Device: Desktop or Laptop Any Browser: Chrome 120.0 Keyboard: US Status: draft
nested focus selection

Phenomenon

When a contenteditable element contains another contenteditable element, focus behavior becomes unpredictable. Clicking on the nested element may not properly focus it, and selection ranges may span across both elements incorrectly.

Reproduction example

  1. Create a contenteditable div.
  2. Inside it, create another contenteditable div.
  3. Click on the inner contenteditable element.
  4. Try to select text within the inner element.
  5. Observe focus and selection behavior.

Observed behavior

  • Focus may remain on the outer contenteditable instead of moving to the inner one.
  • Selection ranges may include content from both the outer and inner elements.
  • The caret position may be incorrect when clicking within the nested element.

Expected behavior

  • Clicking on a nested contenteditable should focus that element.
  • Selection should be contained within the focused contenteditable element.
  • The caret should appear at the click position within the nested element.

Playground for this case

Use the reported environment as a reference and record what happens in your environment while interacting with the editable area.

Reported environment
OS: Any Ubuntu 22.04
Device: Desktop or Laptop Any
Browser: Chrome 120.0
Keyboard: US
Your environment

Use this editable area to reproduce the described case.

Event log
Use this log together with the case description when filing or updating an issue.
0 events
Interact with the editable area to see events here.