Fix focus of dialog inputs within shadow DOM (#189)

This commit is contained in:
Adrian Nita 2020-05-15 13:49:19 +03:00
Родитель 8b458a4b76
Коммит 9dc839397f
5 изменённых файлов: 20 добавлений и 14 удалений

10
dist/dialog-polyfill.esm.js поставляемый
Просмотреть файл

@ -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();
}

10
dist/dialog-polyfill.js поставляемый
Просмотреть файл

@ -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();
}

Просмотреть файл

@ -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();
}

2
package-lock.json сгенерированный
Просмотреть файл

@ -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",