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.

Form input type=number behaves erratically while selecting (in chrome)

See original GitHub issue

Describe the bug

When you try to select a part of a FormInput having type=number it does not select the text properly. (Only in Chrome).

Example gif: actual-chrome

Steps to reproduce the bug

Using Chrome 77.0.3865.90.
Go to https://bootstrap-vue.js.org/docs/components/form-input/#input-type
Enter some numbers in the Type number row.
Try to select part of the numbers. You’ll notice that it does not do it properly.

You can also test it in this codesandbox where I’ve added a native input and the b-form-input.

Expected behavior

It should be possible to select easily part of the text or move the caret to any position by clicking it. Example (Firefox): expected-firefox

Versions

I’ve used your own website.

Libraries:

BootstrapVue: v2.0.4

Environment:

Device: MSI laptop using .
OS: Ubuntu 18.04.3 LTS (The same happens using a macOS with el Capitan).
Browser: Chrome
Version: 77.0.3865.90

Issue Analytics

State:
Created 4 years ago
Comments:5 (4 by maintainers)

Top GitHub Comments

2reactions

jacobmllr95commented, Oct 15, 2019

@mverdaguer I’ve forked your your CodeSandbox and applied the form-control class to the native input and noticed the same behavior: https://codesandbox.io/s/withered-worker-21h0v

1reaction

mverdaguercommented, Oct 16, 2019

FYI: I’ve opened an issue there: https://github.com/twbs/bootstrap/issues/29528

Top Results From Across the Web

Chrome/HTML5: Input type number not respecting max ...

I realize that it gives a tooltip on form submission telling you that it's invalid, but it seems like inconsistent behavior that the...

HTML5 Input type=number broken in Google Chrome #5422

This is broken because on input type="number", Chrome (including Canary) exposes the editable state and the IAccessibleText interface, but doesn't expose any ...

HTML5 input type=number and decimals/floats in Chrome

So what happens in Chrome with the following HTML when we try to enter a decimal (floating point) number and submit the form?...

Why the number input is the worst input - Stack Overflow Blog

We do have an input that's labeled as a number, but when you add it to your form, it actually renders as <input...

Form Inputs: The Browser Support Issue You Didn't Know You ...

In the real world, many of these new inputs and attributes — even seemingly innocuous types like <input type=“number”> — don't always behave...