Svelte: Does not update binded number input field with trailing zeros

Created on 18 Apr 2020  Â·  11Comments  Â·  Source: sveltejs/svelte

Describe the bug
If you bind a value to an input a number input field that has a trailing zero on it. Then update the value, the value in the number input field will not change.

Logs
No bug logs.

To Reproduce
https://svelte.dev/repl/04d21f51f66f4910b6da0d27fe5ce1a0?version=3.20.1

  1. Create a number input field and bind and bind a variable to it.
  2. Create a button with an on click event that will change the number variable.
  3. Type in the input box 14.10
  4. Click the button.
  5. The variable changes but the number input box does not.

Bug-Does-Not-Update-Number-Inputs-with-Trailing-Zeros-•-REPL-•-Svelte

Expected behavior
That the input and variable be in sync regardless of the trailing zeros.

Information about your Svelte project:

  • Your browser and the version: Chorme version 80
  • Your operating system: OSX 10.15.3

  • Svelte version 3.20.1

  • Rollup

Severity
I want to say medium to severe because I can see a lot of users including myself typing in an extra zero. Any application you build for accounting could cause bugs because of this error.

bug

Most helpful comment

The issue perhaps doesn't express it well, but if you type 5.0 into the text box and then click the button which triggers code to change it to 3, the text box still says 5.0. If you type 5 into the text box and click the button, then the text box is updated to 3. (OP: A specific list of steps to reproduce is often more clear than an animated GIF for things like this.)

When I use the browser inspector to set the element's value to 3 or "3" it updates properly. I don't think that has anything to do with the IEEE754 representation of numbers, and it certainly appears to be an actual bug.

All 11 comments

You should read this: https://0.30000000000000004.com/

For exact representation of input, use <input type=text>.

The issue perhaps doesn't express it well, but if you type 5.0 into the text box and then click the button which triggers code to change it to 3, the text box still says 5.0. If you type 5 into the text box and click the button, then the text box is updated to 3. (OP: A specific list of steps to reproduce is often more clear than an animated GIF for things like this.)

When I use the browser inspector to set the element's value to 3 or "3" it updates properly. I don't think that has anything to do with the IEEE754 representation of numbers, and it certainly appears to be an actual bug.

@dimfeld I should have done the exact steps. Thank you for adding that, I should have listed the full steps. It think the actual bug is here. It's on the repl line 121. to_number function probably returns the same value for 14.10 as for 14.1.

` function input_input_handler() { name = to_number(this.value); $$invalidate(0, name); }

Also edited the issue to have the steps.

@pushkine I don't think it's a duplicate because it doesn't have to do with reactive statement, it has to do with the fact that the form won't update if it has a trailing zero on it.

I might be wrong though, but I think this has more to do with the fact that svelte does not recognize that a change happened between 15.1 and 15.10. Thus thinks the user is still inputing data.

@pushkine I think you are right. For me using tick does not work, but I think what you wrote on the previous issue is correct. I think for now the work around is to bind to element and manually update it. It might be good to have some documentation around this bug, until it gets it fix.

So if I go to a version before the fix with the lock line mentioned in https://github.com/sveltejs/svelte/issues/4631 the error does not happen.

Previous Working Version
https://svelte.dev/repl/04d21f51f66f4910b6da0d27fe5ce1a0?version=3.8.1

Current Version:
https://svelte.dev/repl/04d21f51f66f4910b6da0d27fe5ce1a0?version=3.20.1

Also note it does not matter whether I use tick or not. I updated my example to show that.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Rich-Harris picture Rich-Harris  Â·  3Comments

thoughtspile picture thoughtspile  Â·  3Comments

lnryan picture lnryan  Â·  3Comments

mmjmanders picture mmjmanders  Â·  3Comments

noypiscripter picture noypiscripter  Â·  3Comments