prevent loop onto documentElement

samthor · samthor · commit 26222dd32a9f · 2018-08-21T12:52:34.000+10:00
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;
 }
