ケース ce-0020 · シナリオ scenario-focus-management

Focus is lost when clicking on certain elements within contenteditable

OS: Windows 11 デバイス: Desktop or Laptop Any ブラウザ: Firefox 120.0 キーボード: US 下書き
focusclickfirefox

このページはまだ翻訳されていません

現在、英語の原文を表示しています。翻訳への貢献をお待ちしております。

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.