Backspace doesn't work in number input field KaiOS | Svelte3

Question

I've run into this weird problem while developing an app for KaiOS using Svelte3. When the input field is set to type number the backspace doesn't work. At all.

<input
 bind:this={ref}
 bind:value
 type="number" />

When it's set to "text" it works perfectly fine. Backspace removes characters as it's pressed. Backspace in this case is the "Call End" button on KaiOS devices. I don't know if this is a KaiOS problem or a Svelte3 problem.

I'm not very skilled in WebDev technologies, so I don't know what else to try. Some additional info that might point towards something.

I have one listener globally

 window.addEventListener("keydown", onKeyDown, true);

Which is attached in my KeyListener that I use to control my app navigation through selectable elements. This also doesn't fire when the backspace is pressed while an input field has focus. Things I have tried.

• Assign functions to onkeydown, onkeyup, onkeypressed (none of them fire the backspace call)
• Removed the event listener that I mention above, changes nothing.
• Assign the functions in a non-svelte way as pure JS inline functions.

On KaiOS only onkeydown fires, incase that might give any of web dev JS experts a hint. I don't know what else to do. Any suggestions would be appreciated.

Answer 1

To handle events on window you can use <svelte:window>. For example:

<svelte:window on:keypress={handleKeypress}/>

But if all you want to do is monitor keypresses on an input you can do it on the <input> directly with <input on:keypress={...}/>.

Here's an example of handling keypress on an input: https://svelte.dev/repl/bfd93b0799c142979eefa1f2558bfb96?version=3.20.1

Answer 2

We have no idea why this works but setting the input type to "tel" makes the backspace key fire and the input field to act as normal while still allowing numbers only.