Case ce-0020 · Scenario scenario-focus-management

Focus is lost when clicking on certain elements within contenteditable

OS: Windows 11 Device: Desktop or Laptop Any Browser: Firefox 120.0 Keyboard: US Status: draft
focus click firefox

Phenomenon

When a contenteditable region contains interactive elements (buttons, links, etc.), clicking on these elements causes the contenteditable to lose focus. This interrupts the editing flow and may cause the caret to disappear.

Reproduction example

  1. Create a contenteditable div.
  2. Inside it, add a button or link element.
  3. Start typing in the contenteditable.
  4. Click on the button or link.
  5. Observe that focus moves away from the contenteditable.

Observed behavior

  • In Firefox on Windows, clicking interactive elements removes focus from the contenteditable.
  • The caret disappears.
  • Typing no longer inserts text into the contenteditable.
  • Focus must be manually restored.

Expected behavior

  • Interactive elements within contenteditable should be clickable without removing focus from the parent.
  • Or, focus should be easily restorable after interacting with nested elements.
  • The editing state should be preserved.

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: Windows 11
Device: Desktop or Laptop Any
Browser: Firefox 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.