prevent loop onto documentElement

GoogleChrome · Aug 21, 2018 · 26222dd · 26222dd
1 parent c41b395
commit 26222dd
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/dialog-polyfill.js b/dialog-polyfill.js
@@ -529,6 +529,8 @@
   dialogPolyfill.DialogManager.prototype.handleFocus_ = function(event) {
     if (this.containedByTopDialog_(event.target)) { return; }
 
+    if (document.activeElement === document.documentElement) { return; }
+
     event.preventDefault();
     event.stopPropagation();
     safeBlur(/** @type {Element} */ (event.target));
@@ -539,9 +541,11 @@
     var dialog = dpi.dialog;
     var position = dialog.compareDocumentPosition(event.target);
     if (position & Node.DOCUMENT_POSITION_PRECEDING) {
-      if (this.forwardTab_) {  // forward
+      if (this.forwardTab_) {
+        // forward
         dpi.focus_();
-      } else {  // backwards
+      } else if (event.target !== document.documentElement) {
+        // backwards if we're not already focused on <html>
         document.documentElement.focus();
       }
     } else {

diff --git a/tests/modal-dialog.html b/tests/modal-dialog.html
@@ -1,11 +1,17 @@
 <!DOCTYPE html>
-<html>
+<html tabindex="0">
 <meta charset='utf-8'>
 <head>
 <script src="../dialog-polyfill.js"></script>
 <meta name="viewport" content="width=device-width, user-scalable=no">
 <link rel="stylesheet" type="text/css" href="../dialog-polyfill.css">
 <style>
+  html {
+    border: 4px solid white;
+  }
+  html:focus {
+    border-color: red;
+  }
 dialog {
   width: 100px;
 }