diff --git a/core/misc/dialog/dialog.ajax.js b/core/misc/dialog/dialog.ajax.js index dca291e08e4..809b287456b 100644 --- a/core/misc/dialog/dialog.ajax.js +++ b/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; diff --git a/core/modules/system/tests/modules/ajax_forms_test/ajax_forms_test.routing.yml b/core/modules/system/tests/modules/ajax_forms_test/ajax_forms_test.routing.yml index 7b1a8267882..86f4d622e78 100644 --- a/core/modules/system/tests/modules/ajax_forms_test/ajax_forms_test.routing.yml +++ b/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' diff --git a/core/modules/system/tests/modules/ajax_forms_test/src/Controller/DialogFormLink.php b/core/modules/system/tests/modules/ajax_forms_test/src/Controller/DialogFormLink.php new file mode 100644 index 00000000000..75ab20c3fa7 --- /dev/null +++ b/core/modules/system/tests/modules/ajax_forms_test/src/Controller/DialogFormLink.php @@ -0,0 +1,45 @@ + [ + '#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'], + ], + ]; + } + +} diff --git a/core/tests/Drupal/FunctionalJavascriptTests/Ajax/FormValuesTest.php b/core/tests/Drupal/FunctionalJavascriptTests/Ajax/FormValuesTest.php index c46d086b937..be512f211ed 100644 --- a/core/tests/Drupal/FunctionalJavascriptTests/Ajax/FormValuesTest.php +++ b/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'], + ]; + } + }