Phenomenon
When composing Japanese text with IME in a contenteditable element in Chrome on Windows, converting romaji to kanji involves displaying a candidate list. The candidate list may appear in an incorrect position, or arrow keys used to navigate candidates may move the caret in the contenteditable instead of navigating the candidate list.
Reproduction example
- Create a contenteditable div.
- Switch to Japanese IME (Microsoft IME or Google Japanese Input).
- Type romaji text (e.g., “kanji”).
- Press Space or Enter to trigger kanji conversion.
- Observe the candidate list position and try navigating with arrow keys.
Observed behavior
- Candidate list may appear far from the input position
- Arrow keys (Up/Down) may move the caret instead of navigating candidates
- Candidate list may disappear when clicking elsewhere
- Selected kanji may not be inserted correctly
Expected behavior
- Candidate list should appear near the input position
- Arrow keys should navigate candidates without moving the caret
- Candidate selection should work reliably
- Selected kanji should be inserted correctly
Impact
- Users cannot reliably convert romaji to kanji
- Workflow is disrupted when candidate selection fails
- Inconsistent behavior creates confusion
Browser Comparison
- Chrome: Candidate list positioning can be inconsistent
- Edge: Similar to Chrome
- Firefox: May have different candidate list behavior
- Safari: Not applicable on Windows
Notes and possible direction for workarounds
- Monitor composition events to detect when candidate list is active
- Prevent default arrow key behavior during candidate navigation
- Use IME-specific APIs if available to detect candidate list state
- Consider using a custom candidate list UI for better control