Number TextField breaks when inputting letters

[gubareve]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Inputting a letter makes the text on the top drop down onto the current text:

GYzsTADdrJ.mp4

Expected Behavior 🤔

Either:

1. The text wont drop down and the letters will be caught by form validation
2. Letters can't be entered

Steps to Reproduce 🕹

https://codesandbox.io/s/material-ui-issue-forked-3o9f6

Steps:

1. Create a textfield like this: <TextField id="outlined-number" type="number" variant="outlined" margin="normal" required fullWidth label="Testing" name="Testing" value={value} onChange={(e) => setValue(e.target.value)} autoFocus />

Context 🔦

I'm trying to make a form element that only accepts numbers. (html built-in form validation is fine)

Your Environment 🌎

C:\Users\Evan>npx @material-ui/envinfo
npx: installed 2 in 1.648s

  System:
    OS: Windows 10 10.0.19042
  Binaries:
    Node: 12.18.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.423.0), Chromium (87.0.664.66)

I use firefox!

[oliviertassinari]

@gubareve This is expected, Firefox fires a change event with an empty string when the content of the field is wrong. See https://next.material-ui.com/components/text-fields/#shrink for the documented solution.

[bartekbp]

@oliviertassinari This scenario seems quite common, so I would expect it to work better. Do you think it's possible to use HTMLInputElement.validity.badInput object to decide to shrink a field when it contains an invalid number? Maybe that would help.