Selection collapses unexpectedly when clicking outside contenteditable
OS: macOS Ubuntu 22.04 · Device: Laptop Any · Browser: Safari 120.0 · Keyboard: US
Open case →Scenario
Selection collapses unexpectedly when clicking outside contenteditable
When a range of text is selected inside a `contenteditable` element, clicking outside the element
selection
Scenario ID
scenario-selection-collapse-on-blur
Details
When a range of text is selected inside a contenteditable element, clicking outside the element
collapses the selection to a caret position inside the editable region instead of clearing the
selection entirely.
References
- Stack Overflow: contenteditable div loses selection when input focuses - Focus loss issues
- Stack Overflow: Selection collapses when clicking button - Button click issues
- Stack Overflow: Keep text selected when element loses focus - Selection preservation
- Stack Overflow: contenteditable div issue when restore saving selection - Selection restoration
- jQuery UI Bug #11145: Safari selection issues - Browser differences
Scenario flow
Visual view of how this scenario connects to its concrete cases and environments. Nodes can be dragged and clicked.
Variants
Each row is a concrete case for this scenario, with a dedicated document and playground.
| Case | OS | Device | Browser | Keyboard | Status |
|---|---|---|---|---|---|
| ce-0008-selection-collapses-on-click-outside | macOS Ubuntu 22.04 | Laptop Any | Safari 120.0 | US | draft |
Cases
Open a case to see the detailed description and its dedicated playground.
Related Scenarios
Other scenarios that share similar tags or category.
Tags: selection, caret
Browser zoom causes caret and selection positioning issues
When the browser is zoomed (or content is scaled via CSS transforms), caret position and text selection in contenteditable elements can become inaccurate. Clicking at a certain position places the caret elsewhere, and selection highlights may not match the visual selection.
1 case
Tags: selection, caret
RTL text direction and selection behavior inconsistent in contenteditable
Right-to-left (RTL) and mixed-direction text in contenteditable causes caret misalignment, scroll failures, and select-all behavior that differs from LTR and from spec.
1 case
Tags: caret
Text caret is invisible on position:relative elements
When editing content inside an element with `position:relative`, the text caret (cursor) is completely invisible. Text can be typed and appears in the editor, but there's no visual feedback of where the insertion point is located.
2 cases
Tags: caret
Typing certain characters makes cursor jump on Chrome Mobile
On Chrome Mobile for Android, typing certain punctuation characters (commas, colons, semicolons, quotes, etc.) in the middle of a word causes the cursor to jump to the end of the word instead of staying at the insertion point.
2 cases
Tags: caret
Caret jumps to end when deleting character next to non-editable element
When deleting the last character before a non-editable "pill" or tag element (contenteditable="false") in a contenteditable div in Chrome, the caret (cursor) jumps to the end of the entire contenteditable div instead of staying adjacent to the remaining content.
1 case
Comments & Discussion
Have questions, suggestions, or want to share your experience? Join the discussion below.