Phenomenon
When spellcheck is enabled on a contenteditable element, browser spellcheck suggestions can interfere with editing. The spellcheck UI may overlap with content, and accepting suggestions may cause unexpected behavior.
Reproduction example
- Create a contenteditable div with
spellcheck="true". - Type text with intentional misspellings.
- Observe the spellcheck suggestions that appear.
- Try to accept or ignore suggestions.
- Continue editing and observe any interference.
Observed behavior
- In Safari on macOS, spellcheck suggestions appear as expected.
- Accepting suggestions may cause the caret to jump unexpectedly.
- The spellcheck UI may overlap with content during editing.
- Spellcheck may interfere with IME composition.
Expected behavior
- Spellcheck should work seamlessly with contenteditable.
- Suggestions should not interfere with editing flow.
- Caret position should remain stable when accepting suggestions.
- Spellcheck should pause during IME composition.