Caret does not appear in empty contenteditable div in Firefox
OS: Any Any · Device: Desktop or Laptop Any · Browser: Firefox Latest · Keyboard: US
Open case →Scenario
Caret does not appear in empty contenteditable div in Firefox
Caret does not appear in empty contenteditable div in Firefox
Scenario ID
scenario-firefox-empty-div-caret-not-appearing
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-0318-firefox-empty-div-caret-not-appearing | Any Any | Desktop or Laptop Any | Firefox Latest | 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: firefox, 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: firefox, caret
Caret position jumps unexpectedly after pasting content
After pasting content into a contenteditable region, the caret position does not end up at the expected location, sometimes jumping to the beginning of the pasted content or to an unexpected position.
1 case
Tags: firefox, focus
Focus is lost when clicking on certain elements within contenteditable
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.
1 case
Tags: caret, focus
contenteditable focus and caret issues on iOS
On iOS, contenteditable elements may become non-selectable or non-editable. Tapping on the element doesn't display the caret, preventing text input.
0 cases
Tags: firefox, caret
Caret position jumps to beginning on React re-render
When using contentEditable elements in React, the caret (cursor) position jumps to the beginning of the element whenever the component re-renders. This occurs because React's reconciliation process replaces DOM nodes, causing the browser to lose track of the caret position. This issue is more prevalent in Safari and Firefox.
1 case
Comments & Discussion
Have questions, suggestions, or want to share your experience? Join the discussion below.