-
Notifications
You must be signed in to change notification settings - Fork 66
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
Dialog height change causes button click to not register #5267
Comments
This is a common UX issue with vertical forms that validate on blur:
Some common solutions seem to be:
|
Artur mentioned it yesterday: vaadin/framework@da211e9 It apparently involves listening for mousedown on the button, and then programmatically triggering click on mouseout. And then fixing several regressions afterwards. Not sure if we want to go there. |
It seems that the best universal solution would be to disable validation on blur (or any other field-specific event), and only validate when explicitly triggered through the binder ( The least problematic solution for now is probably to construct the UI in a way that prevents shifting the button's position, e.g. by wrapping the form in a Scroller with a fixed default height, and placing the button below it. That way, when the height of the form changes, the presence of a scrollbar may be affected but the button stays put. |
For the current project., disabling validation on blur is not desired since there are complex forms with multiple inter dependent fields, and the user relies on getting feedback immediately. Keeping enough space reserved for the error message is one option that is being evaluated. |
I am experiencing exactly this issue as mentioned in the new forum here. I have a narrow form. Leaving the focused textfield to press cancel button triggers validation, which renders error message , which in turn moves the cancel button bellow the mouse cursor. If I press and release cancel button very fast there is no problem. Pressing and waiting for the button to be moved down and then release results in this issue. |
I believe this fixed the problem since 24.3.0-beta1. I have this issue with 24.2.5 but the lost focus validation is gone with 23.3.9. |
Now that the Dialog (since 23.1) has a built-in static footer, I would recommend placing buttons there, and defining a fixed height for the Dialog. That way, when validation errors appear/disappear, and the form's height changes, the buttons will stay put. |
Description of the bug
The scenario is that I have a dialog with a number of input fields. These fields have associated binder validations. When there is an error in the data entered into the field, the error message shows up causing the dialog to grow in height.
If I click on the button directly after correcting the field value, then it validates the input again immediately. This in turn removes the error message, which causes the dialog height to change. If the dialog height changes significantly enough, the mouse may no longer be on top of the Save button when the click is registered. This means that the click registers on the dialog background, and no events are sent to the server.
Expected behavior
When the user clicks on a button it should cause the button to be clicked, and the events should be sent to the server.
Minimal reproducible example
Type in 'abc#@gmail.com' in the email field and click on "Add" button. Notice that the "saved!" notification shows up.
Click in the email input field and remove the '#' character. Click directly on the "Add" button. Notice that the dialog changes height but the notification does not show up.
Versions
The text was updated successfully, but these errors were encountered: