While typing texe in a field with type:integer, no error is raised :
When the field is unfocused, the erroneous input remains displayed and overlays on the field title :
Apparently the renderer converts user input from text to integer type (if it is exclusively comprised of integer characters) or to null type otherwise.
Anyone knows how to tweak the custom renderer so that it wipes the input if it is not made of integers 
?
[original thread by bonito-wave]
Hi @bonito-wave, on Chrome I can’t reproduce the issue as the number input only allows numbers to be entered.
On Firefox there seems to be some weirdness in regards to invalid input. Once the input has an invalid value it pretty much breaks: It stops sending ChangeEvents, it doesn’t react to to the value prop anymore etc.
I see two approaches to fix the issue:
Use a regular text input which accepts also invalid values and sets them in the data. In this case the value is never cleared and the overlap will not occur
Don’t even allow invalid inputs (as in Chrome), for example by using react-text-mask
It seems that this is a longstanding React problem, see #6556 and #10370. There it is suggested to use tel instead of number, so you change the input to tel type and adapt the toNumber to check for NaN as a parse result and then this should work fine as a quick workaround, as long as tel is acceptable for you.
[bonito-wave]
Hi Stefan, thank you for your help !
I ended up creating a custom renderer using imaskjs for filtering out unwanted inputs !
