Issue with input type="number" on Firefox/Safari

[juliendelort]

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.

[hybs123]

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.

[hybs123]

https://codesandbox.io/p/sandbox/react-select-number-input-issue-forked-rqxhvc?file=%2Fexample.tsx%3A12%2C48

Here I have implemented the validation algorithm that checks the input value.