Contrib.social

Form errors for Layout Builder block forms should scroll viewport to top

Open on Drupal.org →
Created on 26 June 2018, almost 7 years ago
Updated 17 March 2023, about 2 years ago

Layout Builder should scroll users to the top of the config form when there's a form error.

Steps to repro:

  • Add a block to a LB enabled page. Use invalid data to force validation error. Block should have a long config form (long enough that it forces you to scroll the LB config form to reach the "Add Block" button).
  • Submit form, and observe that nothing seems to happen. But something did happen. If you scroll up, the AJAX form submission resulted in a a form validation error at the top of the form, but you don't see it because it did not auto scroll up the sidebar.

So, I think LB should attach a "scroll to" JS action when it receives a response from the form submit to bring users back to the top of the form.

🐛 Bug report
Status

Active

Version

10.1 ✨

Component
Layout builder  →

Last updated 2 days ago

Created by

🇺🇸United States bkosborne New Jersey, USA

Live updates comments and jobs are added and updated live.
  • Blocks-Layouts

    Blocks and Layouts Initiative. See the #2811175 Add layouts to Drupal issue.

  • Needs issue summary update

    Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment about 2 years ago →
    🇧🇷Brazil carolpettirossi Campinas - SP

    I'm wondering how I can provide a patch here, and any guidance would be appreciated.

    Should we get a ScrollTopCommand into Core (9.x)? I've seen this issue https://www.drupal.org/project/drupal/issues/3300481 ✨ Move ScrollTopCommand views Ajax command to the Drupal Core Fixed that might help with this part.

    After getting a ScrollTopCommand in Core, is updating the AjaxFormHelperTrait::ajaxSubmit the correct solution for this issue?

  • Comment about 2 years ago →
    🇧🇷Brazil carolpettirossi Campinas - SP

    Providing a patch to fix the scrollTop with Ajax submission in Layout Builder. The patch attached is for 9.5.x.

    The approach is to override the AjaxFormHelperTrait::ajaxSubmit in ConfigureBlockFormBase, calling a custom/new Ajax command called LayoutBuilderScrollTopCommand responsible for scrolling the LB canvas to top.

    Before:

    After:
    layout

  • Status changed to Needs review about 2 years ago
  • Comment about 2 years ago →
    🇧🇷Brazil carolpettirossi Campinas - SP

    Updating status to Needs Review.

  • Status changed to Needs work about 2 years ago
  • Comment about 2 years ago →
    needs-review-queue-bot

    The Needs Review Queue Bot → tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

    Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

    Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

  • Comment about 2 years ago →
    🇮🇳India _utsavsharma

    Patch for 10.1.x.

  • Open in Jenkins → Open on Drupal.org →
    Environment: PHP 5.3 & MySQL 5.5
    last update over 1 year ago
    Patch Failed to Apply
  • Comment 9 days ago →
    🇩🇪Germany ammaletu Bonn, Germany

    This is still happening on Drupal 10.4. I had another look at this. Some details:

    • The first patch above (#17) started with its own Layout-Builder-specific scrollTop command.
    • Patch #20 removed most of that command, but not everything, and used the new default ScrollTopCommand instead.
    • This doesn't seem to work, or at least not reliable. I got a JavaScript error "scrollTarget.get is not a function". Line 1882 in the scrollTop function does look to me like the jQuery call is missing.
    • There is a ticket trying to radically simplify the scrollTop function: https://www.drupal.org/project/drupal/issues/3478087 ✨ Modernize Drupal.ajaxCommands.scrollTop() Active

    I tried both versions, but none of them worked for the first error. If I hit "Submit" a second, theird etc. time, sometimes it works and scrolls up, sometimes it scrolls up a bit and sometimes it doesn't.

    Does anybody know if this is specific to Layout Builder? Scrolling on the main part of the page is controlled by the Layout Builder to stay on the block currently being edited. Could this somehow interfere with our scrolling attempts here? If I have a good idea how to fix this, I'm more than happy to provide a correct patch in an MR.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024