Fix Japanese IME input handling for tags and form fields

When typing in Japanese, the Enter key is used to confirm kanji conversion
during IME composition. Previously, pressing Enter would immediately save
the tag, which prevented users from completing the conversion.

Changes:
- Add isComposing check to navigable_list_controller.js Enter handler
- Add IME composition tracking to form_controller.js
- Add compositionstart/compositionend event handlers to tag, step, and
  reaction input fields
- Add preventComposingSubmit action to prevent form submission during
  composition

This fix supports all IME input methods (Japanese, Chinese, Korean, etc.)
using standard browser composition events.
This commit is contained in:
gijigae
2025-12-06 17:26:35 +09:00
parent af14feb8fc
commit e03c002efd
5 changed files with 26 additions and 6 deletions
@@ -8,10 +8,21 @@ export default class extends Controller {
debounceTimeout: { type: Number, default: 300 }
}
#isComposing = false
initialize() {
this.debouncedSubmit = debounce(this.debouncedSubmit.bind(this), this.debounceTimeoutValue)
}
// IME Composition tracking
compositionStart() {
this.#isComposing = true
}
compositionEnd() {
this.#isComposing = false
}
submit() {
this.element.requestSubmit()
}
@@ -32,6 +43,12 @@ export default class extends Controller {
}
}
preventComposingSubmit(event) {
if (this.#isComposing) {
event.preventDefault()
}
}
debouncedSubmit(event) {
this.submit(event)
}