Merge pull request #2 from claydiffrient/master

[changed] Maintain focus inside of tray

Author: claydiffrient

lib/components/Tray.js

@@ -10,14 +10,16 @@ export default React.createClass({
     isOpen: React.PropTypes.bool,
     onBlur: React.PropTypes.func,
     closeTimeoutMS: React.PropTypes.number,
-    closeOnBlur: React.PropTypes.bool
+    closeOnBlur: React.PropTypes.bool,
+    maintainFocus: React.PropTypes.bool
   },
 
   getDefaultProps() {
     return {
       isOpen: false,
       closeTimeoutMS: 0,
-      closeOnBlur: true
+      closeOnBlur: true,
+      maintainFocus: false
     };
   },
 

lib/components/TrayPortal.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
 import cx from 'classnames';
 import focusManager from '../helpers/focusManager';
 import isLeavingNode from '../helpers/isLeavingNode';
+import findTabbable from '../helpers/tabbable';
 
 const styles = {
   overlay: {
@@ -55,7 +56,8 @@ export default React.createClass({
     onBlur: PropTypes.func,
     closeOnBlur: PropTypes.bool,
     closeTimeoutMS: PropTypes.number,
-    children: PropTypes.any
+    children: PropTypes.any,
+    maintainFocus: PropTypes.bool
   },
 
   getInitialState() {
@@ -108,6 +110,15 @@ export default React.createClass({
       this.props.onBlur();
     }
 
+    // Keep focus inside the tray if maintainFocus is true
+    if (e.keyCode === 9 && this.props.maintainFocus && isLeavingNode(this.refs.content, e)) {
+      e.preventDefault();
+      const tabbable = findTabbable(this.refs.content);
+      const target = tabbable[e.shiftKey ? tabbable.length - 1 : 0];
+      target.focus();
+      return;
+    }
+
     // Treat tabbing away from content as blur/close if closeOnBlur
     if (e.keyCode === 9 && this.props.closeOnBlur && isLeavingNode(this.refs.content, e)) {
       e.preventDefault();

lib/components/__tests__/Tray-test.js

@@ -79,4 +79,35 @@ describe('react-tray', function() {
       equal(document.querySelectorAll('.ReactTray__Content').length, 1);
     }, 0);
   });
+
+  describe('maintainFocus prop', function() {
+    this.timeout(0);
+    beforeEach(function(done) {
+      const props = {isOpen: true, onBlur: function() {}, closeTimeoutMS: 0, maintainFocus: true};
+      const children = (
+        <div>
+          <a href="#" id="one">One</a>
+          <a href="#" id="two">Two</a>
+          <a href="#" id="three">Three</a>
+        </div>
+      );
+      renderTray(props, children, () => done());
+    });
+
+    it('sends focus to the first item if tabbing away from the last element', function() {
+      const firstItem = document.querySelector('#one');
+      const lastItem = document.querySelector('#three');
+      lastItem.focus();
+      TestUtils.Simulate.keyDown(document.querySelector('.ReactTray__Content'), {keyCode: 9});
+      equal(document.activeElement, firstItem);
+    });
+
+    it('sends focus to the last item if shift + tabbing from the first item', function() {
+      const firstItem = document.querySelector('#one');
+      const lastItem = document.querySelector('#three');
+      firstItem.focus();
+      TestUtils.Simulate.keyDown(document.querySelector('.ReactTray__Content'), {keyCode: 9, shiftKey: true});
+      equal(document.activeElement, lastItem);
+    });
+  });
 });