hybs123
commented
7 months ago I am encountering the same issue. In Chrome it clears the invalid input but in Mozilla it does not clear the invalid input that is a non-number character in the number type input field. On input we will have to implement a logic that clears out the input field when it encounters an invalid input.
I am trying to replace the Input component in order to use a
<input type="number" />. This works well in chrome, but I'm hitting an issue on Firefox and Safari: when typing a non-number character, the input gets cleared out and it's impossible to type anything else nor to clear the input (have to refresh the page in order to get unstuck).Here is a minimal reproduction (has to be opened in Firefox or Safari):
https://codesandbox.io/p/sandbox/youthful-lamport-c39lv6
And here is a gif of the issue (using Firefox):
In the gif above, I first type "123" then the letter "a" which triggers the input to be cleared. From that point forward, everything I type (letters, numbers, backspace) has no effect.