diff --git a/frontend/src/components/TagInput.svelte b/frontend/src/components/TagInput.svelte index 671e669..5594b5b 100644 --- a/frontend/src/components/TagInput.svelte +++ b/frontend/src/components/TagInput.svelte @@ -81,6 +81,25 @@ add(input); } + /** + * beforeinput fires before the browser commits a value change. We use it + * to catch Enter on platforms where keydown doesn't deliver a usable + * Enter event — notably Firefox on Android, which treats the soft- + * keyboard Enter as "advance to next form field" at the input layer + * (no keydown for us to intercept). InputEvent.inputType === 'insertLineBreak' + * still fires here, so we get to preventDefault before focus moves. + * Idempotent with onKey: keydown's preventDefault on Chrome cancels + * the would-be insertion, so beforeinput never fires there. + */ + function onBeforeInput(e: Event) { + const ie = e as InputEvent; + if (composing) return; + if (ie.inputType === 'insertLineBreak') { + e.preventDefault(); + add(input); + } + } + function onType(e: Event) { input = (e.target as HTMLInputElement).value; clearTimeout(timer); @@ -118,6 +137,7 @@ value={input} oninput={onType} onkeydown={onKey} + onbeforeinput={onBeforeInput} oncompositionstart={() => (composing = true)} oncompositionend={() => (composing = false)} placeholder="Skriv etikett, trykk Enter eller «Legg til»"