b-form-input type="number" not allowing to enter decimals(.) on Firefox

[soichih]

I have a number field on my form

<b-form-input type="number" v-model.number="param.default" mousewheel.native="$event.preventDefault()"/>

I used to be able to enter decimals like "3.5" or "10.0", etc.. but it stopped working recently. I've confirmed that the same issue exists on the bootstrap-vue website - under "Type number:" section (https://bootstrap-vue.js.org/docs/components/form-input/)

Strangely, I can still enter a decimal if I type it elsewhere, and copy / paste into the form field. b-form-input seems to be preventing me from entering "." character.

[tmorehouse]

You might need to add attributes to set the step values

See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Allowing_decimal_values

One issue with number inputs is that their step size is 1 by default — if you try to enter a number with a decimal, such as "1.0", it will be considered invalid. If you want to enter a value that requires decimals, you'll need to reflect this in the step value (e.g. step="0.01" to allow decimals to two decimal places).

<b-form-input type="number" ... step="0.01" min="0.00" max="1000.00" >

[soichih]

@tmorehouse Thanks for the tip.

I've tried adding step="0.01" min="0.00" max="1000.00" but it didn't help.. I still can't enter "." on firefox.

Here is the jsfiddle to recreate this problem

https://jsfiddle.net/soichih/eywraw8t/292607/

It looks like this is firefox specific issue (I am using v61.0.1). I can enter "." just fine with Chrome.

[tmorehouse]

Check the language/locale settings on your browser.

Number input behaviours change (on some browsers) based on the locale settings (i.e. using , instead of .)

[soichih]

I don't think this is caused by locale setting. I've updated the jsfiddle to include a native input element to show that this issue only happens for b-form-input (on firefox) but works fine for the native input.

[averied]

I'm also having this issue. Makes no sense that a user has to touch any locale settings, this should work out of the box. I'm in Spain, and I cannot use the numerical keyboard to enter decimals. The dot (.) key causes the numeric input to blank out. I can even reproduce this in the demo number type input: https://bootstrap-vue.js.org/docs/components/form-input

This does not happen in : https://v4-alpha.getbootstrap.com/components/forms/

I'm using Chrome BTW

[mihai-macaneata]

I'm also having this issue and it doesn't seem to be language/locale settings related.
The b-form-input type number doesn't accept (.) on Firefox.
Adding step, min, max, lang attributes doesn't help

[tmorehouse]

Merged into dev.

[Branhub]

Does it work on Firefox 56?

[tmorehouse]

It should. You can try the preview version. See #2315