-
-
Notifications
You must be signed in to change notification settings - Fork 5.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
Incorrect helperText space insertet between all components #4425
Comments
Hi, and thanks for your report. It's not a bug, it's a feature™! See rationale and discussion in #4364. |
I see now that it is indeed a feature and even mentioned in the relevant release notes. However the fix is really optimistic and it only works at all if the help text will fit on a single line. Given the very narrow default width of controls this is not at all given. So basically you are sacrificing a lot of valuable screen real estate in case some field should give a single-line validation error. A proper fix for the submit button moving away would need to ensure that the validation texts all fit on a single line (which I think would be a UX nightmare). In any case, when validation fails the user will have to go back and change things, so pressing the save button again without moving the mouse point isn't really a use case. The only real risk I see of having the button move would be if there were some other button with some other behavior (say a delete button) directly above. Then users could theoretically end up typing a invalid value in a field, pressing save and then accidentally pressing delete immediately afterwards |
The problem is that popping validation messages make the submit button move down, under the mouse cursor, and that prevents the click event (in fact, the sumbit button only received a mouseDown event, and never a mouseup). The previous layout prevented us from properly implementing the save on enter feature, and had other corner cases. So we basically had to choose between two evils, and we chose to have working features and a less compact ui by default - letting you opting in to a compact UI with helperText={false}. The heart of the problem, IMHO, is Material Design itself. I can understand that error messages should appear under an input on Mobile, but on Desktop I really think the horizontal layout (where labels and error messages appear aside the input) is better. |
As I was trying to point out, validation messages still makes the save button move away. But at least the button responds enough to trigger the validation. I don't see exactly what the flow of event could have been that you were catering for that caused validation to trigger on mouse down but still wanted something to happen on mouse up, but it doesn't much matter. I just want to hint that if you have a real problem with the save button moving away you should probably also handle multi-line validation errors |
@sigmunau I understand your point of view. We can't know in advance if the error message will be multi line or not. We chose to reserve some space for a single line error message. Again, this is a trade-off. If this trade-off doesn't fit your requirements, you can still use your own input components instead of react-admin's. |
Since about commit 07ae952 react admin has started putting extra space between most controls, unless
helperText={false}
is explicitly passed to the component.What you were expecting:
Inputs are laied out nicely without extra space in between
What happened instead:
Extra space is inserted between all inputs unless helperText is explicitly set to false
Steps to reproduce:
upgrade ra-ui-materialui to version 3.2.2
Related code:
The rendered html looks like this:
Notice the
<p>
tag withMuiFormHelperText-root
classOther information:
Environment
The text was updated successfully, but these errors were encountered: