diff --git a/lib/helpers/scopeTab.js b/lib/helpers/scopeTab.js index 5ba664fb..d368bd8f 100644 --- 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 index 6d8d4faf..11e87782 100644 --- a/specs/Modal.spec.js +++ b/specs/Modal.spec.js @@ -100,6 +100,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'}); equal(modal.portal.refs.content.className.contains('myClass'), true);