[number-field] Force pattern to disallow entering arbitrary non-numeric value in Firefox

[DiegoCardoso]

Description

Part of #3102

vaadin-number-field uses a <input type="number">
internally and there's a known limitation for it on Firefox where it allows user to type any character on it, differently as seen in Chrome which only numbers a few other characters (.,,,e) are allowed.

Consider implementing what has been done for other numerical fields and add a way to prevent non-valid characters to be inserted.

Expected outcome

Field ignores non-numeric values being typed by user.

Actual outcome

User can type any value to the field.

Live Demo

https://cdn.vaadin.com/vaadin-text-field/2.5.4/demo/#number-field-demos

Steps to reproduce

1. Open vaadin-number-field demos in FF
2. Type any character into it.

Browsers Affected

• Chrome
• Firefox
• Safari
• Edge
• IE 11
• iOS Safari
• Android Chrome

[web-padawan]

See an example of using text type for number field in useNumberField provided by @react-aria library.

[rolfsmeds]

Also consider this as part of the same refac: vaadin/flow-components#1991

[web-padawan]

Here are some good articles about not using input type="number" for numeric fields:

• React Aria: blog post, source code on GitHub
• GOV.UK Design System: blog post