buefy / buefy

Lightweight UI components for Vue.js based on Bulma
https://buefy.org
MIT License
9.56k stars 1.11k forks source link

b-input number with negative, leading 0, decimal values return 0 #3565

Closed OrestHk closed 2 years ago

OrestHk commented 3 years ago

Hello, First of all thanks, for the library, and the work you put into it ! Really nice to use !

Here's the problem I encountered :

Overview of the problem

Buefy version: [0.9.10] Vuejs version: [2.6.14] OS/Browser: Windows / Chrome - Firefox

Description

When using <b-input v-model.number="nbr" type="number" />, and trying to enter a negative value with a leaging 0, the input value will always be 0 (in the rendered input). Here's a pen where you can try to reproduce the problem : https://codepen.io/jackmil/pen/OJjmrVp

Steps to reproduce

  1. Enter -0.12 as a value in the native input
  2. Works well
  3. Enter the same value in the buefy input
  4. The negative sign will be removed as the value switch to 0 when writting -0.

Expected behavior

The value should be -0.12 for the buefy input

Actual behavior

The value is 0

Solutions ?

One of the solution would be to add the lazy prop to the component, which will wait for the change event to actually change the value. It could work as a quick fix for ongoing projects will the problem is resolved

Another solution would be to modify the input watcher a little from https://github.com/buefy/buefy/blob/18191f43216b14c557fcafc9cf779e4301b97b28/src/components/input/Input.vue#L218-L220 to =>

        value(value) {
            if (this.isFocused && this.type === 'number') { 
              return 
            }

            this.newValue = value
        }

Even though it will allow the user to enter alphanumeric values, it will be closer to the native behaviour of an <input type="number" />, and still go through validation on change / blur

Still I'm not sure if it would break something else, running the tests on the b-input component with this modification seems to do the trick.

Have a nice day !

geeksilva97 commented 2 years ago

Could using NumberInput work in this case?

OrestHk commented 2 years ago

NumlberInput did the trick for the negative values ! But there is another problem with NumberInput, the step prop cannot be set to any ATM. I'll take a look and try to submit a PR