Binding a number input restricts what you can type in it

[Vectornaut]

Setting bind:value or bind:valueAsNumber for an input of type number restricts what you can type in it. As far as I can tell:

• Typing digits works as expected
• Typing . does nothing in Firefox, and moves the cursor to the beginning of the field in Chromium
• Typing anything else clears the input in Firefox, and does nothing in Chromium

To Reproduce

A maintainer has provided an executable that reproduces the problem. Maybe they could add the source code to this issue report.

Expected behavior

Setting bind:value or bind:valueAsNumber does not affect how a number input responds to typing.

Environment

• Sycamore: 0.9.0-beta.3
• Browsers: Firefox 132.0 (64-bit) and Ungoogled Chromium 129.0.6668.100
• OS: Ubuntu 22.04

[lukechu10]

Note: https://examples.sycamore.dev/number-binding/ is just the automatically hosted version of the examples located at https://github.com/sycamore-rs/sycamore/tree/main/examples/number-binding

The problem is that something like 123. gets parsed as the number 123, which, when formatted, is just 123. Since bind:valueAsNumber is a "controlled" input, typing the . will automatically get removed by the signal updating. This results in the bug where we can never type 123.456 since we'll never get pass the .

[lukechu10]

Turns out React had the same issue which they fixed. Could be a useful reference: https://github.com/facebook/react/issues/6556

[Vectornaut]

Note: https://examples.sycamore.dev/number-binding/ is just the automatically hosted version of the examples located at https://github.com/sycamore-rs/sycamore/tree/main/examples/number-binding

I've added the source code link to the issue!