Fix focus of dialog inputs within shadow DOM (#189)
This commit is contained in:
Родитель
8b458a4b76
Коммит
9dc839397f
|
@ -564,24 +564,26 @@ dialogPolyfill.DialogManager.prototype.containedByTopDialog_ = function(candidat
|
|||
};
|
||||
|
||||
dialogPolyfill.DialogManager.prototype.handleFocus_ = function(event) {
|
||||
if (this.containedByTopDialog_(event.target)) { return; }
|
||||
var target = event.composedPath ? event.composedPath()[0] : event.target;
|
||||
|
||||
if (this.containedByTopDialog_(target)) { return; }
|
||||
|
||||
if (document.activeElement === document.documentElement) { return; }
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
safeBlur(/** @type {Element} */ (event.target));
|
||||
safeBlur(/** @type {Element} */ (target));
|
||||
|
||||
if (this.forwardTab_ === undefined) { return; } // move focus only from a tab key
|
||||
|
||||
var dpi = this.pendingDialogStack[0];
|
||||
var dialog = dpi.dialog;
|
||||
var position = dialog.compareDocumentPosition(event.target);
|
||||
var position = dialog.compareDocumentPosition(target);
|
||||
if (position & Node.DOCUMENT_POSITION_PRECEDING) {
|
||||
if (this.forwardTab_) {
|
||||
// forward
|
||||
dpi.focus_();
|
||||
} else if (event.target !== document.documentElement) {
|
||||
} else if (target !== document.documentElement) {
|
||||
// backwards if we're not already focused on <html>
|
||||
document.documentElement.focus();
|
||||
}
|
||||
|
|
|
@ -570,24 +570,26 @@
|
|||
};
|
||||
|
||||
dialogPolyfill.DialogManager.prototype.handleFocus_ = function(event) {
|
||||
if (this.containedByTopDialog_(event.target)) { return; }
|
||||
var target = event.composedPath ? event.composedPath()[0] : event.target;
|
||||
|
||||
if (this.containedByTopDialog_(target)) { return; }
|
||||
|
||||
if (document.activeElement === document.documentElement) { return; }
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
safeBlur(/** @type {Element} */ (event.target));
|
||||
safeBlur(/** @type {Element} */ (target));
|
||||
|
||||
if (this.forwardTab_ === undefined) { return; } // move focus only from a tab key
|
||||
|
||||
var dpi = this.pendingDialogStack[0];
|
||||
var dialog = dpi.dialog;
|
||||
var position = dialog.compareDocumentPosition(event.target);
|
||||
var position = dialog.compareDocumentPosition(target);
|
||||
if (position & Node.DOCUMENT_POSITION_PRECEDING) {
|
||||
if (this.forwardTab_) {
|
||||
// forward
|
||||
dpi.focus_();
|
||||
} else if (event.target !== document.documentElement) {
|
||||
} else if (target !== document.documentElement) {
|
||||
// backwards if we're not already focused on <html>
|
||||
document.documentElement.focus();
|
||||
}
|
||||
|
|
10
index.js
10
index.js
|
@ -565,24 +565,26 @@ dialogPolyfill.DialogManager.prototype.containedByTopDialog_ = function(candidat
|
|||
};
|
||||
|
||||
dialogPolyfill.DialogManager.prototype.handleFocus_ = function(event) {
|
||||
if (this.containedByTopDialog_(event.target)) { return; }
|
||||
var target = event.composedPath ? event.composedPath()[0] : event.target;
|
||||
|
||||
if (this.containedByTopDialog_(target)) { return; }
|
||||
|
||||
if (document.activeElement === document.documentElement) { return; }
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
safeBlur(/** @type {Element} */ (event.target));
|
||||
safeBlur(/** @type {Element} */ (target));
|
||||
|
||||
if (this.forwardTab_ === undefined) { return; } // move focus only from a tab key
|
||||
|
||||
var dpi = this.pendingDialogStack[0];
|
||||
var dialog = dpi.dialog;
|
||||
var position = dialog.compareDocumentPosition(event.target);
|
||||
var position = dialog.compareDocumentPosition(target);
|
||||
if (position & Node.DOCUMENT_POSITION_PRECEDING) {
|
||||
if (this.forwardTab_) {
|
||||
// forward
|
||||
dpi.focus_();
|
||||
} else if (event.target !== document.documentElement) {
|
||||
} else if (target !== document.documentElement) {
|
||||
// backwards if we're not already focused on <html>
|
||||
document.documentElement.focus();
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "dialog-polyfill",
|
||||
"version": "0.5.0",
|
||||
"version": "0.5.2",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "dialog-polyfill",
|
||||
"version": "0.5.1",
|
||||
"version": "0.5.2",
|
||||
"description": "Polyfill for the dialog element",
|
||||
"main": "dist/dialog-polyfill.js",
|
||||
"module": "dist/dialog-polyfill.esm.js",
|
||||
|
|
Загрузка…
Ссылка в новой задаче