Textfield type="number" allowing non-numeric values in firefox

[BjoernRave]

Current Behavior 😯

When creating a number field like the following: <Textfield type="number" /> on firefox it allows non-numeric values. It works fine in chrome.

Expected Behavior 🤔

When creating a number field like the following: <Textfield type="number" /> it should only allow numeric values.

Steps to Reproduce 🕹

Steps:

1. Create a Textfield with type="number"
2. Open the app in firefox
3. Try to type a

Your Environment 🌎

Tech	Version
Material-UI	v4.8.0
React	v 16.12
Browser	Firefox v71
TypeScript	3.7.2
etc.

[mmarkelov]

@BjoernRave This is not Material bug. There seems to be some disagreement about this among browsers
Link 1
Link 2
Link 3

[mmarkelov]

@BjoernRave as a workaround you can do this:

React.useEffect(() => {
    document
      .querySelector("input[type='number']")
      .addEventListener("keypress", evt => {
        if (evt.which === 8) {
          return;
        }
        if (evt.which < 48 || evt.which > 57) {
          evt.preventDefault();
        }
      });
  }, []);

[BjoernRave]

@mmarkelov okay, didn't know that and also thanks for the workaround, I was almost going crazy :D

[oliviertassinari]

Duplicate of #10582