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
- Create a contenteditable div.
- Inside it, create another contenteditable div.
- Click on the inner contenteditable element.
- Try to select text within the inner element.
- 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.