Form wrapper focus in webformScrollTop not working correctly

Created on 4 June 2024, 10 months ago
Updated 30 July 2024, 8 months ago

Problem/Motivation

In Drupal.AjaxCommands.prototype.webformScrollTop we look for a form element with this code:
var $form = $(response.selector + '-content').find('form');

But it turns out the form never exists inside that wrapper, because the wrapper is opened and closed in the #prefix, rather than opened in the #prefix and closed in the #suffix:

$form += ['#prefix' => '', '#suffix' => ''];
$form['#prefix'] .= '<span id="' . $wrapper_id . '-content"></span>';
$form['#prefix'] .= '<div' . $wrapper_attributes . '>';
$form['#suffix'] = '</div>' . $form['#suffix'];

This means that $form.hasClass('js-webform-autofocus') will always return false because $form is an empty jquery object.

Steps to reproduce

Proposed resolution

Close the wrapping span in the suffix:

$form += ['#prefix' => '', '#suffix' => ''];
$form['#prefix'] .= '<span id="' . $wrapper_id . '-content">';
$form['#prefix'] .= '<div' . $wrapper_attributes . '>';
$form['#suffix'] = '</div></span>' . $form['#suffix'];

Remaining tasks

User interface changes

API changes

Data model changes

๐Ÿ› Bug report
Status

Needs review

Version

6.3

Component

Code

Created by

๐Ÿ‡ฆ๐Ÿ‡บAustralia mstrelan

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @mstrelan
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia maithri shetty

    Maithri Shetty โ†’ made their first commit to this issueโ€™s fork.

  • Assigned to maithri shetty
  • Open in Jenkins โ†’ Open on Drupal.org โ†’
    Core: 10.1.4 + Environment: PHP 8.2 & MySQL 8
    last update 10 months ago
    536 pass
  • Issue was unassigned.
  • Status changed to Needs review 10 months ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia maithri shetty

    @mstrelan I have raised a PR for requested change. Can you please provide me the steps to reproduce the issue so that I can cross verify in my local as well. Thank you.

  • ๐Ÿ‡ฆ๐Ÿ‡บAustralia mstrelan
    1. Install Drupal standard profile
    2. Install Webform and Webform UI module
    3. Edit the default Contact webform and enabled AJAX
    4. Go to /form/contact and hit submit to trigger a validation error
    5. Inspect the page markup and notice an empty span above the webform, rather than wrapping the webform
  • Pipeline finished with Success
    10 months ago
    Total: 2161s
    #190442
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia maithri shetty

    @mstrelan cross verified and works fine. Thank you

  • Pipeline finished with Failed
    10 months ago
    Total: 412s
    #191238
  • ๐Ÿ‡ซ๐Ÿ‡ทFrance mh_nichts

    Hello,

    Thanks for filing this issue.

    However, I suggest solving it in another way, as using a span to wrap a div and a whole form is invalid according to W3C HTML standards.

    My suggestion would be :

    • in JS : remove '-content' from the selector, so it targets the initial wrapper div which effectively contains the form
    • in PHP : keep span where it is, but add tabindex="-1" so it can effectively get the focus (currently it can't, whether wrapping the form or not)

    I will try to commit this changes next week.

  • Pipeline finished with Success
    9 months ago
    Total: 176s
    #237263
  • ๐Ÿ‡จ๐Ÿ‡ฆCanada Liam Morland Ontario, CA ๐Ÿ‡จ๐Ÿ‡ฆ

    Please rebase against 6.3.x.

  • Pipeline finished with Failed
    8 months ago
    Total: 1757s
    #238507
  • ๐Ÿ‡ซ๐Ÿ‡ทFrance mh_nichts

    @lkmorlan Thank you ! It should be OK now, I could apply the patch from the MR locally.

  • ๐Ÿ‡ซ๐Ÿ‡ทFrance mh_nichts
  • Pipeline finished with Success
    8 months ago
    Total: 2934s
    #238526
  • Pipeline finished with Success
    8 months ago
    Total: 3181s
    #238534
  • Pipeline finished with Success
    4 months ago
    Total: 731s
    #367943
  • Pipeline finished with Success
    4 months ago
    Total: 973s
    #377338
  • Pipeline finished with Skipped
    3 months ago
    #387554
  • Pipeline finished with Failed
    3 months ago
    Total: 446s
    #404096
  • Pipeline finished with Failed
    3 months ago
    Total: 1273s
    #404104
  • Pipeline finished with Failed
    3 months ago
    Total: 844s
    #404162
  • Pipeline finished with Failed
    3 months ago
    Total: 981s
    #404185
  • Pipeline finished with Success
    3 months ago
    Total: 1097s
    #404854
  • Pipeline finished with Failed
    3 months ago
    Total: 2264s
    #404872
  • Pipeline finished with Canceled
    3 months ago
    Total: 262s
    #404912
  • Pipeline finished with Success
    3 months ago
    Total: 992s
    #404913
  • Pipeline finished with Skipped
    2 months ago
    #407684
  • Pipeline finished with Failed
    about 2 months ago
    Total: 905s
    #420023
  • Pipeline finished with Failed
    about 2 months ago
    #420060
  • Pipeline finished with Failed
    about 2 months ago
    #420063
  • Pipeline finished with Failed
    about 2 months ago
    #420066
  • Pipeline finished with Success
    about 1 month ago
    Total: 229s
    #435479
  • Pipeline finished with Failed
    about 1 month ago
    Total: 460s
    #445522
  • Pipeline finished with Success
    about 1 month ago
    Total: 228s
    #445535
  • Pipeline finished with Success
    about 1 month ago
    Total: 207s
    #445730
  • Pipeline finished with Success
    about 1 month ago
    Total: 245s
    #445734
  • Pipeline finished with Success
    30 days ago
    Total: 205s
    #445994
  • Pipeline finished with Success
    30 days ago
    Total: 281s
    #445998
Production build 0.71.5 2024