question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Number -0 cannot be correctly rendered in input :value

See original GitHub issue

Version

2.6.11

Reproduction link

https://codepen.io/yuchaosydney/pen/xxRgEPP

Steps to reproduce

  1. Open reproduction link
  2. 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:closed
  • Created 3 years ago
  • Comments:11 (5 by maintainers)

github_iconTop GitHub Comments

3reactions
posvacommented, Feb 13, 2021

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?

2reactions
posvacommented, Feb 18, 2021

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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found