Problem/Motivation
IEF Complex forms do the submission via AJAX call. But they don't do the scroll to the message area, to make the error messages visible to the user.
Steps to reproduce
1. Open an entity edit form with some long IEF Complex form (with "Update" button), that doesn't fit vertically to the screen, with a required field at the top.
2. Keep the required field empty, submit the IEF Complex form.
It will reload, but will not be successfully submitted. And you even don't see the reason why, because the form were submitted via AJAX call and the error message appears at the top of the form. But the "Update" button is in the bottom of the form, so you don't see that something appears, and don't see the Error Message without scrolling up.
Proposed resolution
To solve this problem we need to check the availability of errors, and if they exist - scroll the page to the Error Message area.
We have an AJAX function ScrollTopCommand that implements the scrolling, so can reuse it to implement the required behavior.
But the problem is that function is located in Views module, so now we need to include views/views.ajax library to make it works, and it will not work if the Views module is not installed. But here #3300481: Move ScrollTopCommand views Ajax command to the Drupal Core is my proposal to move this useful function to Drupal core.
As for now, I've created a patch, that checks the availability of the views module and if it is enabled - attaches library and implements the scrolling to the message area.
Remaining tasks
User interface changes
API changes
Data model changes
Issue fork inline_entity_form-3300430
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #3
murzI've added a wrapper AJAX callback functions, that checks for the error, and if they present - adds scroll via
ScrollTopCommandAJAX command.Attaching a static patch file with those changes, to make it possible to use in composer until #3204538: GitLab Merge Requests Unable to Generate Incremental Patch Files is resolved.
Comment #4
murzComment #6
murzComment #7
murzI've reworked the functionality to fix failing tests (it was failing because of missing the Views module) - now if this module is not enabled, it disables the new scrolling functionality.
Attaching a static patch file with those changes, to make it possible to use in composer until #3204538: GitLab Merge Requests Unable to Generate Incremental Patch Files is resolved.
Please review.
Comment #8
murzAlso, I've created a fix for Drupal Core that makes work scroll inside Drupal Off canvas dialogs (Modal, Sidebar) - #3300426: Views viewsScrollTop (ScrollTopCommand AJAX command) doesn't work inside Drupal Off canvas dialogs
And a suggestion to move scrollTop command from the Views module to the Drupal Core: #3300481: Move ScrollTopCommand views Ajax command to the Drupal Core
Comment #9
geek-merlinWow, impressing research and thought work to get us good UX.
Thought: There are modules that give us a floating message area that is always on the screen (and may be dismissed). But we can not rely on that, and usually the message area is on the page top. On a long form, WITH this patch, a looong form, and a widget on the bottom, we submit the widget, are auto-scrolled to the top, just to have to go back to the bottom manually.
With the core inline form errors module though, a scroll-to-top is not wanted at all, rather the page should stay at the widget.
What about enabling inline_form_errors to fix the problem?
Comment #10
tienwang commentedPatch for 2.0.x
Comment #11
dmitry.korhovAdding a patch, compatible with Drupal 11.1 (now it uses Drupal\Core\Ajax\ScrollTopCommand)