Number -0 cannot be correctly rendered in input :value

[yuwu9145]

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.

[posva]

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?

[yuwu9145]

Hi @posva , my use case is making a custom number input field component and it can be simplified to this demo.

Basically, when user tries to input a number between 0 and -1 (e.g. -0.1) and when they type -0 for the first time, child number input component emit -0 as it should, however v-model resets it 0 and user has to re-type (from second time when reach -0 v-model will start respecting -0 because it does not change v-model so there is no re-render).

It is actually a pretty edge case and using string version will work, however, my personal opinion is when dealing with number emits, v-model 's only responsibility is converting numbers to strings and display string value in input tag (double-way binding should not automatically mutate input emit value). Therefore, if -0 is a legitimate number in JS, v-model should respect it and convert it to a String version of '-0' rather than automatically convert it to 0. Eventually it is users' responsibility to decide how to deal with -0 coming from Vue level (Whether use it for Mathematical purpose or simply convert to 0 in application level).

[posva]

however v-model resets it 0

Note it's native input behavior too though.

Maybe a patch to v-model instead of dom props would make sense but I think this is part of the edge cases of custom inputs that have to be handled in user land like currency and other formatting. The -0. in front of the zero is not the only edge case to handle, there is also the having just -, the .3.

Note you can also use a v-model.lazy on the input (not the custom one) to defer setting the variable and applying validation.

[yuwu9145]

Hi @posva ,

Thank you very much for your time and reply.

I agree with you inputEl.value = -0 -> 0 in the String is a native behaviour (note here is assigning a number type -0), however, (correct me if I am wrong) if you check out source code line 47 in src/platforms/web/runtime/modules/dom-props.js, when it deals with Number type -0 (NOT STRING), it converts "Number -0" to "String '0'" by calling String(-0) -> '0' first, then do inputEl.value='0' (Note here is assigning string value "0" not a number value -0 as mentioned in native behaviour) in line 49. So the native behaviour inputEl.value = -0 -> 0 in the String could be irrelevant regarding this topic? Because -0 -> '0' happens in Vue level, not by calling inputEl.value = -0 (number type).

In addition, I also agree with you when dealing with number type emits, it is user's responsibility to make custom logic handling -, .3 etc., because these are NOT LEGITIMATE NUMBERS. However, the main distinction is -0 is a LEGITIMATE number, therefore it should be handled in the same way as other LEGITIMATE NUMBERS are rather than being automatically mutated to 0.

Therefore, the issue here is:

In terms of handling number type emit, Vue should respect ALL LEGITIMATE NUMBERS (including -0) values and render them correctly.

I think most users will just do custom logic to handle -0 number emit in user land (because this is not hard and straightforward), but do you think this could also be an improvement in Vue?

[sirlancelot]

Interestingly, even Number.prototype.toString doesn't detect -0:

Edit: Math.sign(-0).toString() doesn't even give a useful return value. How would one detect -0 in code?

Edit 2: The only way I've been able to find to accurately detect negative zero vs unsigned zero is with this code:

const isNegativeZero = (x) => (1 / x) === -Infinity

[posva]

After giving this more thinking, given all the possible edge cases when dealing with numbers, this should be handled in a custom input by using a string and transforming its value.

A reasonable fix for v-model to keep -0 as -0 could be worth but it should not be in dom props like #11910, it should only apply to v-model.number

[yuwu9145]

@posva thanks for your message and bringing v-model.number to attention, I will spend more time on finding a proper fix

[sirlancelot]

A reasonable fix for v-model to keep -0 as -0 could be worth but it should not be in dom props like #11910, it should only apply to v-model.number

Looking at this compiled template shows that it gets passed as-is to domProps.value and since -0 gets "stringified" to "0", some transformation would be necessary before it gets passed to domProps.value.

On the update side, I think updating the toNumber() utility function would be all that's needed seeing as _n() is an alias to that function and adding .number modifier to v-model automatically adds that transformation:

/**
 * Convert an input value to a number for persistence.
 * Check for special case of signed zero.
 * If the conversion fails, return original string.
 */
export function toNumber (val: string): number | string {
  const n = (1 / n) === -Infinity ? -0 : parseFloat(val)
  return isNaN(n) ? val : n
}

[yuwu9145]

Big thanks to @sirlancelot , that solution totally makes sense. After a further digging into source code, I found -0 transform can be demostrated in following data diagram:

v-model (issue demo)

Based on my investigation, v-model does not do any transform on -0 but -0 -> '0' happens in dom-props

v-model.number (issue demo)

@sirlancelot 's solution resolve the output from v-model.number respects original -0 and pass -0 to dom-props

As a consequence, if fixes in both dom-props and toNumber are made, above two demo issues will be resolved. Pull request #11910 has been updated to include @sirlancelot 's change.

@posva @sirlancelot thoughts?

[posva]

It cannot changed on props, it has to happen only to vmodel number for perf and consistency reasons

[posva]

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