Number -0 cannot be correctly rendered in input :value
See original GitHub issueVersion
2.6.11
Reproduction link
https://codepen.io/yuchaosydney/pen/xxRgEPP
Steps to reproduce
- Open reproduction link
- Compare display value from input tag rendered by Vue and plain input html tag
What is expected?
Input dom should correctly render value -0
What is actually happening?
It renders as 0
In javascript, Number -0
is legitimate value, this can be verified by checking Number(-0) === -0
. Therefore, when input :value
is number -0
, input tag should correctly display it, just as a plain input html tag does.
Issue Analytics
- State:
- Created 3 years ago
- Comments:11 (5 by maintainers)
Top Results From Across the Web
HTML number input min and max not working properly
When I change the time in the rendered UI using the little arrows on the right-hand side of the input field, everything works...
Read more >Why the number input is the worst input - Stack Overflow Blog
When the number input contains an invalid value and you retrieve the value, you get a blank string. · Valid numbers include more...
Read more ><input>: The Input (Form Input) element - HTML
The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide...
Read more >Uncontrolled Components - React
Changing the value of defaultValue attribute after a component has mounted will not cause any update of the value in the DOM. render()...
Read more >lightning-input - documentation - Salesforce Developers
The lightning-input component uses the Javascript parseFloat() function to convert input value strings to numbers. Very large numbers with more than ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Note an input does the same if you set its value through JS:
inputEl.value = -0
-> 0 in the String.As a workaround, you can use a string version with
v-model
.In practice, except for Mathematical applications, differentiating between -0 and +0. But even then, one would use something to correctly handle large numbers.
What is your use case?
As this would break existing cases with v-model.number and
-0
and would never replace the need of a custom handled input with a string value, I don’t think this is worth pursuing in core, but rather in a plugin to handle all the possible edge cases for numbers. In Vue 3, this could be handled with a custom modifier