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
- Create a contenteditable div.
- Inside it, add a button or link element.
- Start typing in the contenteditable.
- Click on the button or link.
- 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.