Issue #3020061 by bnjmnm, tedbow, lauriii, zrpnr, smustgrave, yash.rode: Ajax replace does not refocus element if inside a dialog

(cherry picked from commit 81088a6523)

core/misc/dialog/dialog.ajax.js

@@ -38,8 +38,11 @@
           $dialog.trigger('dialogButtonsChange');
         }
 
-        // Force focus on the modal when the behavior is run.
-        $dialog.dialog('widget').trigger('focus');
+        // If the body element has focus, it means focus was effectively lost.
+        // In these instances, force focus on the dialog.
+        if (document.activeElement === document.body) {
+          $dialog.dialog('widget').trigger('focus');
+        }
       }
 
       const originalClose = settings.dialog.close;

core/modules/system/tests/modules/ajax_forms_test/ajax_forms_test.routing.yml

@@ -45,3 +45,11 @@ ajax_forms_test.ajax_element_form:
     _form: '\Drupal\ajax_forms_test\Form\AjaxFormsTestAjaxElementsForm'
   requirements:
     _access: 'TRUE'
+
+ajax_forms_test.dialog_form_link:
+  path: '/ajax_forms_test_dialog_form_link'
+  defaults:
+    _title: 'Dialog form link test'
+    _controller: '\Drupal\ajax_forms_test\Controller\DialogFormLink::makeDialogFormLink'
+  requirements:
+    _access: 'TRUE'

core/modules/system/tests/modules/ajax_forms_test/src/Controller/DialogFormLink.php

@@ -0,0 +1,45 @@
+<?php
+
+namespace Drupal\ajax_forms_test\Controller;
+
+use Drupal\Core\Url;
+
+/**
+ * Test class to create dialog form link.
+ */
+class DialogFormLink {
+
+  /**
+   * Builds an associative array representing a link that opens a dialog.
+   *
+   * @return array
+   *   An associative array of link to a form to be opened.
+   */
+  public function makeDialogFormLink() {
+    return [
+      'dialog' => [
+        '#type' => 'link',
+        '#title' => 'Open form in dialog',
+        '#url' => Url::fromRoute('ajax_forms_test.get_form'),
+        '#attributes' => [
+          'class' => ['use-ajax'],
+          'data-dialog-type' => 'dialog',
+        ],
+      ],
+      'off_canvas' => [
+        '#type' => 'link',
+        '#title' => 'Open form in off canvas dialog',
+        '#url' => Url::fromRoute('ajax_forms_test.get_form'),
+        '#attributes' => [
+          'class' => ['use-ajax'],
+          'data-dialog-type' => 'dialog',
+          'data-dialog-renderer' => 'off_canvas',
+        ],
+      ],
+      '#attached' => [
+        'library' => ['core/drupal.dialog.ajax'],
+      ],
+    ];
+  }
+
+}

core/tests/Drupal/FunctionalJavascriptTests/Ajax/FormValuesTest.php

@@ -31,21 +31,36 @@ class FormValuesTest extends WebDriverTestBase {
 
   /**
    * Submits forms with select and checkbox elements via Ajax.
+   *
+   * @dataProvider formModeProvider
    */
-  public function testSimpleAjaxFormValue() {
+  public function testSimpleAjaxFormValue($form_mode) {
     $this->drupalGet('ajax_forms_test_get_form');
 
     $session = $this->getSession();
     $assertSession = $this->assertSession();
 
+    // Run the test both in a dialog and not in a dialog.
+    if ($form_mode === 'direct') {
+      $this->drupalGet('ajax_forms_test_get_form');
+    }
+    else {
+      $this->drupalGet('ajax_forms_test_dialog_form_link');
+      $assertSession->waitForElementVisible('css', '[data-once="ajax"]');
+      $this->clickLink("Open form in $form_mode");
+      $this->assertNotEmpty($assertSession->waitForElementVisible('css', '.ui-dialog [data-drupal-selector="edit-select"]'));
+    }
+
     // Verify form values of a select element.
     foreach (['green', 'blue', 'red'] as $item) {
       // Updating the field will trigger an AJAX request/response.
       $session->getPage()->selectFieldOption('select', $item);
 
-      // The AJAX command in the response will update the DOM
+      // The AJAX command in the response will update the DOM.
       $select = $assertSession->waitForElement('css', "div#ajax_selected_color:contains('$item')");
       $this->assertNotNull($select, "DataCommand has updated the page with a value of $item.");
+      $condition = "(typeof jQuery !== 'undefined' && jQuery('[data-drupal-selector=\"edit-select\"]').is(':focus'))";
+      $this->assertJsCondition($condition, 5000);
     }
 
     // Verify form values of a checkbox element.
@@ -97,4 +112,15 @@ class FormValuesTest extends WebDriverTestBase {
     $this->drupalGet('ajax_forms_test_get_form');
   }
 
+  /**
+   * Data provider for testSimpleAjaxFormValue.
+   */
+  public function formModeProvider() {
+    return [
+      ['direct'],
+      ['dialog'],
+      ['off canvas dialog'],
+    ];
+  }
+
 }