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
)
merge-requests/5604/head
parent
8f5fa56905
commit
f54b258eb5
|
@ -38,8 +38,11 @@
|
||||||
$dialog.trigger('dialogButtonsChange');
|
$dialog.trigger('dialogButtonsChange');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Force focus on the modal when the behavior is run.
|
// If the body element has focus, it means focus was effectively lost.
|
||||||
$dialog.dialog('widget').trigger('focus');
|
// In these instances, force focus on the dialog.
|
||||||
|
if (document.activeElement === document.body) {
|
||||||
|
$dialog.dialog('widget').trigger('focus');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const originalClose = settings.dialog.close;
|
const originalClose = settings.dialog.close;
|
||||||
|
|
|
@ -45,3 +45,11 @@ ajax_forms_test.ajax_element_form:
|
||||||
_form: '\Drupal\ajax_forms_test\Form\AjaxFormsTestAjaxElementsForm'
|
_form: '\Drupal\ajax_forms_test\Form\AjaxFormsTestAjaxElementsForm'
|
||||||
requirements:
|
requirements:
|
||||||
_access: 'TRUE'
|
_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'
|
||||||
|
|
|
@ -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'],
|
||||||
|
],
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -31,21 +31,36 @@ class FormValuesTest extends WebDriverTestBase {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Submits forms with select and checkbox elements via Ajax.
|
* 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');
|
$this->drupalGet('ajax_forms_test_get_form');
|
||||||
|
|
||||||
$session = $this->getSession();
|
$session = $this->getSession();
|
||||||
$assertSession = $this->assertSession();
|
$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.
|
// Verify form values of a select element.
|
||||||
foreach (['green', 'blue', 'red'] as $item) {
|
foreach (['green', 'blue', 'red'] as $item) {
|
||||||
// Updating the field will trigger an AJAX request/response.
|
// Updating the field will trigger an AJAX request/response.
|
||||||
$session->getPage()->selectFieldOption('select', $item);
|
$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')");
|
$select = $assertSession->waitForElement('css', "div#ajax_selected_color:contains('$item')");
|
||||||
$this->assertNotNull($select, "DataCommand has updated the page with a value of $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.
|
// Verify form values of a checkbox element.
|
||||||
|
@ -97,4 +112,15 @@ class FormValuesTest extends WebDriverTestBase {
|
||||||
$this->drupalGet('ajax_forms_test_get_form');
|
$this->drupalGet('ajax_forms_test_get_form');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Data provider for testSimpleAjaxFormValue.
|
||||||
|
*/
|
||||||
|
public function formModeProvider() {
|
||||||
|
return [
|
||||||
|
['direct'],
|
||||||
|
['dialog'],
|
||||||
|
['off canvas dialog'],
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue