window.getSelection() returns null when contenteditable loses focus
OS: macOS Ubuntu 22.04 · Device: Desktop or Laptop Any · Browser: Safari 120.0 · Keyboard: US
Open case →Scenario
window.getSelection() returns null when contenteditable loses focus
When a contenteditable region loses focus, window.getSelection() may return null in Safari, even if there was a valid selection before the focus loss. This makes it difficult to preserve or work with selections.
selection
Scenario ID
scenario-selection-api-behavior
Details
When a contenteditable region loses focus, window.getSelection() may return null in Safari, even if there was a valid selection before the focus loss. This makes it difficult to preserve or work with selections.
References
- Stack Overflow: contenteditable div loses selection when another input focuses - Selection preservation techniques
- Stack Overflow: Safari getSelection not working - Selection API issues
- Stack Overflow: window.getSelection returns no range in Safari after onclick - Event timing issues
- Stack Overflow: Losing focus in contenteditable in Safari - Focus management
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-0044-getSelection-returns-null | macOS Ubuntu 22.04 | Desktop or 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, safari
Selection is lost after copying content in contenteditable
After copying selected text in a contenteditable region using Cmd+C, the selection is lost in Safari. The user must re-select the text to perform additional operations.
1 case
Tags: selection, safari
selection.addRange not working correctly in Safari
When setting cursor position using `selection.addRange()` in a contenteditable element, it works correctly in Chrome and Firefox but fails in Safari. The selection "pops out" of intended marker element and moves to the next sibling's text node instead of staying within the marker.
3 cases
Tags: selection
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: safari
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: selection
Cursor disappears with contenteditable="false" elements
When contenteditable='false' elements are placed inside a contenteditable container, the cursor may disappear or become invisible in certain browsers, making it difficult for users to determine the text insertion point.
0 cases
Comments & Discussion
Have questions, suggestions, or want to share your experience? Join the discussion below.