Merge pull request #1 from cannona/tab-out

Added prop to make closing on tabbing out optional.

Author: mzabriskie

lib/components/Tray.js

@@ -9,13 +9,15 @@ export default React.createClass({
   propTypes: {
     isOpen: React.PropTypes.bool,
     onBlur: React.PropTypes.func,
-    closeTimeoutMS: React.PropTypes.number
+    closeTimeoutMS: React.PropTypes.number,
+    closeOnBlur: React.PropTypes.bool
   },
 
   getDefaultProps() {
     return {
       isOpen: false,
-      closeTimeoutMS: 0
+      closeTimeoutMS: 0,
+      closeOnBlur: true
     };
   },
 

lib/components/TrayPortal.js

@@ -107,8 +107,8 @@ export default React.createClass({
       this.props.onBlur();
     }
 
-    // Treat tabbing away from content as blur/close
-    if (e.keyCode === 9 && isLeavingNode(this.refs.content, e)) {
+    // Treat tabbing away from content as blur/close if closeOnBlur
+    if (e.keyCode === 9 && this.props.closeOnBlur && isLeavingNode(this.refs.content, e)) {
       e.preventDefault();
       this.props.onBlur();
     }

lib/components/__tests__/Tray-test.js

@@ -63,4 +63,20 @@ describe('react-tray', function() {
       equal(document.querySelectorAll('.ReactTray__Content').length, 0);
     }, 0);
   });
+
+  it('should close on blur by default', function () {
+    renderTray({isOpen: true, onBlur: function () {}, closeTimeoutMS: 0});
+    TestUtils.Simulate.keyDown(document.querySelector('.ReactTray__Content'), {key: 'Tab'});
+    setTimeout(function () {
+      equal(document.querySelectorAll('.ReactTray__Content').length, 0);
+    }, 0);
+  });
+
+  it('should not close on blur', function () {
+    renderTray({isOpen: true, onBlur: function () {}, closeTimeoutMS: 0, closeOnBlur: false});
+    TestUtils.Simulate.keyDown(document.querySelector('.ReactTray__Content'), {key: 'Tab'});
+    setTimeout(function () {
+      equal(document.querySelectorAll('.ReactTray__Content').length, 1);
+    }, 0);
+  });
 });