Phenomenon
When editing Thai text with IME in a contenteditable element, pressing Backspace removes the entire character including tone marks and vowel marks instead of allowing component-level editing. This makes fine-grained correction difficult and differs from native input fields.
Reproduction example
- Focus the editable area.
- Activate Thai IME.
- Type a Thai character with tone marks and vowel marks (e.g., “สวัสดี”).
- Press Backspace once.
Observed behavior
- The entire character with all combining marks is removed by a single Backspace press
- Component-level editing (e.g., editing just the tone mark) is not possible
- The event log shows only one
beforeinput/inputpair for the deletion - Behavior differs from native input fields
Expected behavior
- Each Backspace press should allow more granular deletion, matching how native inputs behave
- Component-level editing should be possible
- Behavior should be consistent with native input fields
Browser Comparison
- Chrome: May remove entire characters with combining marks
- Edge: Similar to Chrome
- Firefox: May have different granularity behavior
- Safari: Not applicable on Windows
Notes and possible direction for workarounds
- Compare behavior with a plain
<input>element in the same environment to confirm the difference - This behavior can affect cursor movement, undo granularity, and diff calculation
- Consider implementing custom backspace handling for finer control with combining characters