MUI number input label UI issue with non-numeric input - Githubissues

rjsf-team / react-jsonschema-form

A React component for building Web forms from JSON Schema.

https://rjsf-team.github.io/react-jsonschema-form/

Apache License 2.0

14.32k stars 2.19k forks source link

MUI number input label UI issue with non-numeric input #4161

Open OliverDudgeon opened 6 months ago

OliverDudgeon commented 6 months ago

Prerequisites

[X] I have searched the existing issues
[X] I understand that providing a SSCCE example is tremendously useful to the maintainers.
[X] I have read the documentation
[X] Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

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

- OS:
- Node:
- npm:

Anything else?

No response

nickgros commented 6 months ago

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 type="number" with TextField.

In RJSF, we should use a number-specific component, but the MUI team has not released one for Materal-UI, only for MUI Base: https://github.com/mui/material-ui/issues/19154

You may be able to work around this by using a custom widget that doesn't use type="number"