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

Created on 19 Dec 2019 · 4Comments · Source: mui-org/material-ui

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:

Create a Textfield with type="number"
Open the app in firefox
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. | |

TextField duplicate

Source

BjoernRave

Most helpful comment

@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();
        }
      });
  }, []);

mmarkelov on 19 Dec 2019

❤1 🎉1

All 4 comments

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

mmarkelov on 19 Dec 2019

👍1

@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();
        }
      });
  }, []);

mmarkelov on 19 Dec 2019

❤1 🎉1

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

BjoernRave on 19 Dec 2019

Duplicate of #10582