Unverified Commit 67aad0ff authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3346300 by bnjmnm, smustgrave: After using select to change plugin or... 

Issue #3346300 by bnjmnm, smustgrave: After using select to change plugin or region, element loses focus and page scrolls to bottom

(cherry picked from commit 09f64bf5)
parent 98a79c1b

core/modules/field_ui/field_ui.js

+39 −0
Original line number Diff line number Diff line
@@ -271,6 +271,45 @@ 
          // Fire the Ajax update.

          $refreshRows[0].value = rowNames.join(' ');

        }

        once(

          'edit-refresh',

          'input[data-drupal-selector="edit-refresh"]',

        ).forEach((input) => {

          // Keep track of the element that was focused prior to triggering the

          // mousedown event on the hidden submit button.

          let returnFocus = {

            drupalSelector: null,

            scrollY: null,

          };

          // Use jQuery on to listen as the mousedown event is propagated by

          // jQuery trigger().

          $(input).on('mousedown', () => {

            returnFocus = {

              drupalSelector: document.activeElement.getAttribute(

                'data-drupal-selector',

              ),

              scrollY: window.scrollY,

            };

          });

          input.addEventListener('focus', () => {

            if (returnFocus.drupalSelector) {

              // Refocus the element that lost focus due to this hidden submit

              // button being triggered by a mousedown event.

              document

                .querySelector(

                  `[data-drupal-selector="${returnFocus.drupalSelector}"]`,

                )

                .focus();



              // Ensure the scroll position is the same as when the input was

              // initially changed.

              window.scrollTo({

                top: returnFocus.scrollY,

              });

              returnFocus = {};

            }

          });

        });

        $('input[data-drupal-selector="edit-refresh"]').trigger('mousedown');



        // Disabled elements do not appear in POST ajax data, so we mark the

core/modules/field_ui/tests/src/FunctionalJavascript/ManageDisplayTest.php

+7 −0
Original line number Diff line number Diff line
@@ -148,11 +148,18 @@ public function testFormatterUI() { 
    $this->assertEquals('hidden', $field_region->getValue());

    $field_region->setValue('content');

    $assert_session->assertWaitOnAjaxRequest();



    // Confirm the region element retains focus after the AJAX update completes.

    $this->assertJsCondition('document.activeElement === document.querySelector("[name=\'fields[field_test][region]\']")');

    $button_save->click();



    // Change the format for the test field.

    $field_test_format_type->setValue('field_test_multiple');

    $assert_session->assertWaitOnAjaxRequest();



    // Confirm the format element retains focus after the AJAX update completes.

    $this->assertJsCondition('document.activeElement === document.querySelector("[name=\'fields[field_test][type]\']")');



    $plugin_summary = $page->find('css', '#field-test .field-plugin-summary');

    $this->assertStringContainsString("test_formatter_setting_multiple: dummy test string", $plugin_summary->getText(), 'The expected summary is displayed.');