Merge pull request reactjs#141 from everdimension/fix-no-tabbable-focus

Fix no tabbable focus
Widen · Mar 26, 2016 · b5e38cf · b5e38cf
2 parents e8749dd + c844719
commit b5e38cf
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/lib/helpers/scopeTab.js b/lib/helpers/scopeTab.js
@@ -2,7 +2,10 @@ var findTabbable = require('../helpers/tabbable');
 
 module.exports = function(node, event) {
   var tabbable = findTabbable(node);
-  if (!tabbable.length) return;
+  if (!tabbable.length) {
+      event.preventDefault();
+      return;
+  }
   var finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];
   var leavingFinalTabbable = (
     finalTabbable === document.activeElement ||

diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js
@@ -102,6 +102,19 @@ describe('Modal', function () {
     unmountModal();
   });
 
+  it('keeps focus inside the modal when child has no tabbable elements', function() {
+    var tabPrevented = false;
+    var modal = renderModal({isOpen: true}, 'hello');
+    strictEqual(document.activeElement, modal.portal.refs.content);
+    Simulate.keyDown(modal.portal.refs.content, {
+        key: "Tab",
+        keyCode: 9,
+        which: 9,
+        preventDefault: function() { tabPrevented = true; }
+    });
+    equal(tabPrevented, true);
+  });
+
   it('supports custom className', function() {
     var modal = renderModal({isOpen: true, className: 'myClass'});
     notEqual(modal.portal.refs.content.className.indexOf('myClass'), -1);