Skip to content

Svelte 5: Number input - two-way binding behaviour is inconsistent with Svelte 4 behaviour #9959

@someonestolemyusername

Description

@someonestolemyusername

Describe the bug

If you bind a number input element to a variable like so:
<input type="number" bind:value={variable}>

The following is the expected behaviour which is working in Svelte 4:

  • Focus on the number input field and enter a number like 1000
  • Move the caret to the start of the field
  • Delete the 1 using the delete key or backspace
  • The field will end up with '000' with the caret at the far left
  • Then you can type another digit, e.g. 2, and the field should then display '2000'

The same code in Svelte 5 does not behave the same. What happens is when you delete the 1, the field is changed from having '000' into only having '0', and the caret is moved to the end of the field. So when you type the next digit, perhaps the digit '2', the field ends up with a value of '2' instead of the expected '2000'.

Note the issue is occurring without using any new features of Svelte 5 - I suggest it is likely this is a regression that will break some apps in the wild.

Reproduction

Svelte 4 (current behaviour which seems correct): https://svelte.dev/repl/daa6095a99234e528de0b2a27a3eaad6?version=4.2.8
Svelte 5 (demonstrating the problem): svelte 5 link

Logs

No response

System Info

Svelte v5.0.0-next.26

Severity

blocking an upgrade

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions