-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
MUI number input label UI issue with non-numeric input #4161
Labels
Comments
OliverDudgeon
added
bug
needs triage
Initial label given, to be assigned correct labels and assigned
labels
Apr 11, 2024
First, this is a MUI-specific issue with how different browsers' behavior interacts with their TextField component. In the MUI docs, they advise to not use In RJSF, we should use a number-specific component, but the MUI team has not released one for Materal-UI, only for MUI Base: mui/material-ui#19154 You may be able to work around this by using a custom widget that doesn't use |
nickgros
added
awaiting response
material-ui
material-ui related theme issue
and removed
needs triage
Initial label given, to be assigned correct labels and assigned
labels
Apr 12, 2024
nickgros
changed the title
<title>
MUI number widget label UI issue with non-numeric input
Apr 12, 2024
nickgros
changed the title
MUI number widget label UI issue with non-numeric input
MUI number input label UI issue with non-numeric input
Apr 12, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Prerequisites
What theme are you using?
mui
Version
5.18.2
Current Behavior
When the mui theme is selected and a schema with a type of number is used, the label can overlap the field value when an invalid number is entered.
Expected Behavior
The label should remain ontop like with any other value entered
Steps To Reproduce
Type some letters into one of the number fields, this is just the "Numbers" example
https://rjsf-team.github.io/react-jsonschema-form/#eyJmb3JtRGF0YSI6eyJpbnRlZ2VyIjo0MiwibnVtYmVyRW51bSI6MiwiaW50ZWdlclJhbmdlIjo0MiwiaW50ZWdlclJhbmdlU3RlcHMiOjgwfSwic2NoZW1hIjp7InR5cGUiOiJvYmplY3QiLCJ0aXRsZSI6Ik51bWJlciBmaWVsZHMgJiB3aWRnZXRzIiwicHJvcGVydGllcyI6eyJudW1iZXIiOnsidGl0bGUiOiJOdW1iZXIiLCJ0eXBlIjoibnVtYmVyIn0sImludGVnZXIiOnsidGl0bGUiOiJJbnRlZ2VyIiwidHlwZSI6ImludGVnZXIifSwibnVtYmVyRW51bSI6eyJ0eXBlIjoibnVtYmVyIiwidGl0bGUiOiJOdW1iZXIgZW51bSIsImVudW0iOlsxLDIsM119LCJudW1iZXJFbnVtUmFkaW8iOnsidHlwZSI6Im51bWJlciIsInRpdGxlIjoiTnVtYmVyIGVudW0iLCJlbnVtIjpbMSwyLDNdfSwiaW50ZWdlclJhbmdlIjp7InRpdGxlIjoiSW50ZWdlciByYW5nZSIsInR5cGUiOiJpbnRlZ2VyIiwibWluaW11bSI6LTUwLCJtYXhpbXVtIjo1MH0sImludGVnZXJSYW5nZVN0ZXBzIjp7InRpdGxlIjoiSW50ZWdlciByYW5nZSAoYnkgMTApIiwidHlwZSI6ImludGVnZXIiLCJtaW5pbXVtIjo1MCwibWF4aW11bSI6MTAwLCJtdWx0aXBsZU9mIjoxMH19fSwidWlTY2hlbWEiOnsiaW50ZWdlciI6eyJ1aTp3aWRnZXQiOiJ1cGRvd24ifSwibnVtYmVyRW51bVJhZGlvIjp7InVpOndpZGdldCI6InJhZGlvIiwidWk6b3B0aW9ucyI6eyJpbmxpbmUiOnRydWV9fSwiaW50ZWdlclJhbmdlIjp7InVpOndpZGdldCI6InJhbmdlIn0sImludGVnZXJSYW5nZVN0ZXBzIjp7InVpOndpZGdldCI6InJhbmdlIn19LCJ0aGVtZSI6Im1hdGVyaWFsLXVpLTUiLCJsaXZlU2V0dGluZ3MiOnsic2hvd0Vycm9yTGlzdCI6InRvcCIsImV4cGVyaW1lbnRhbF9kZWZhdWx0Rm9ybVN0YXRlQmVoYXZpb3IiOnsiYXJyYXlNaW5JdGVtcyI6eyJwb3B1bGF0ZSI6InBvcHVsYXRlIiwibWVyZ2VFeHRyYURlZmF1bHRzIjpmYWxzZX0sImFsbE9mIjoic2tpcERlZmF1bHRzIiwiZW1wdHlPYmplY3RGaWVsZHMiOiJwb3B1bGF0ZUFsbERlZmF1bHRzIn19fQ==
Environment
Anything else?
No response
The text was updated successfully, but these errors were encountered: