Issue #3397785 by yash.rode, srishtiiee, lauriii, smustgrave: Dialog focus is returned to dialog instead of first tabbable element on dialog AJAX update

(cherry picked from commit 762fcae92c)
merge-requests/5687/head
Lauri Eskola 2023-12-05 10:58:11 +02:00
parent bc6752e6e3
commit 055e083144
No known key found for this signature in database
GPG Key ID: 382FC0F5B0DF53F8
2 changed files with 14 additions and 5 deletions

View File

@ -38,11 +38,16 @@
$dialog.trigger('dialogButtonsChange');
}
// 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');
}
setTimeout(function () {
// Account for pre-existing focus handling that may have already moved
// the focus inside the dialog.
if (!$dialog[0].contains(document.activeElement)) {
// Move focus to the first focusable element in the next event loop
// to allow dialog buttons to be changed first.
$dialog.dialog('instance')._focusedElement = null;
$dialog.dialog('instance')._focusTabbable();
}
}, 0);
}
const originalClose = settings.dialog.close;

View File

@ -167,8 +167,12 @@ class DialogTest extends WebDriverTestBase {
// Press buttons in the dialog to ensure there are no AJAX errors.
$this->assertSession()->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Hello world');
$this->assertSession()->assertWaitOnAjaxRequest();
$has_focus_text = $this->getSession()->evaluateScript('document.activeElement.textContent');
$this->assertEquals('Do it', $has_focus_text);
$this->assertSession()->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Preview');
$this->assertSession()->assertWaitOnAjaxRequest();
$has_focus_text = $this->getSession()->evaluateScript('document.activeElement.textContent');
$this->assertEquals('Do it', $has_focus_text);
// Reset: close the form.
$form_dialog->findButton('Close')->press();