[added] enforceFocus prop to Modal

Allows you to configure whether the modal should enforce focus when
open. Ideally this doesn't need to be a public API, but in the case of
static models (like in the docs) you need to turn it off, because you
can't assume its the only one open on the page.

Author: jquense

docs/examples/ModalStatic.js

@@ -1,6 +1,7 @@
 const modalInstance = (
   <div className='static-modal'>
     <Modal title='Modal title'
+      enforceFocus={false}
       backdrop={false}
       animation={false}
       container={mountNode}

package.json

@@ -13,7 +13,7 @@
     "test": "npm run lint && npm run build && karma start --single-run && _mocha --compilers js:babel-core/register test/server/*Spec.js",
     "lint": "eslint ./",
     "docs-build": "babel-node tools/build-cli.js --docs-only",
-    "docs": "docs/dev-run",
+    "docs": "babel-node docs/dev-run",
     "docs-prod": "npm run docs-build && NODE_ENV=production babel-node docs/server.js",
     "docs-prod-unoptimized": "npm run docs-build -- --dev && NODE_ENV=production babel-node docs/server.js"
   },

src/Modal.js

@@ -31,6 +31,28 @@ function getContainer(context){
     domUtils.ownerDocument(context).body;
 }
 
+/**
+ * Firefox doesn't have a focusin event so using capture is easiest way to get bubbling
+ * IE8 can't do addEventListener, but does have onfocus in, so we use that in ie8
+ * @param  {ReactElement|HTMLElement} context
+ * @param  {Function} handler
+ */
+function onFocus(context, handler) {
+  let doc = domUtils.ownerDocument(context);
+  let useFocusin = !doc.addEventListener
+    , remove;
+
+  if (useFocusin) {
+    document.attachEvent('onfocusin', handler);
+    remove = () => document.detachEvent('onfocusin', handler);
+  } else {
+    document.addEventListener('focus', handler, true);
+    remove = () => document.removeEventListener('focus', handler, true);
+  }
+  return { remove };
+}
+
+let scrollbarSize;
 
 if ( domUtils.canUseDom) {
   let scrollDiv = document.createElement('div');
@@ -60,7 +82,8 @@ const Modal = React.createClass({
     closeButton: React.PropTypes.bool,
     animation: React.PropTypes.bool,
     onRequestHide: React.PropTypes.func.isRequired,
-    dialogClassName: React.PropTypes.string
+    dialogClassName: React.PropTypes.string,
+    enforceFocus: React.PropTypes.bool
   },
 
   getDefaultProps() {
@@ -69,10 +92,15 @@ const Modal = React.createClass({
       backdrop: true,
       keyboard: true,
       animation: true,
-      closeButton: true
+      closeButton: true,
+      enforceFocus: true
     };
   },
 
+  getInitialState(){
+    return { };
+  },
+
   render() {
     let state = this.state;
     let modalStyle = { ...state.dialogStyles, display: 'block'};
@@ -107,7 +135,7 @@ const Modal = React.createClass({
     );
 
     return this.props.backdrop ?
-      this.renderBackdrop(modal) : modal;
+      this.renderBackdrop(modal, state.backdropStyles) : modal;
   },
 
   renderBackdrop(modal) {
@@ -132,8 +160,8 @@ const Modal = React.createClass({
     let closeButton;
     if (this.props.closeButton) {
       closeButton = (
-          <button type="button" className="close" aria-hidden="true" onClick={this.props.onRequestHide}>&times;</button>
-        );
+        <button type="button" className="close" aria-hidden="true" onClick={this.props.onRequestHide}>&times;</button>
+      );
     }
 
     return (
@@ -169,6 +197,10 @@ const Modal = React.createClass({
     this._onWindowResizeListener =
         EventListener.listen(win, 'resize', this.handleWindowResize);
 
+    if (this.props.enforceFocus) {
+      this._onFocusinListener = onFocus(this, this.enforceFocus);
+    }
+
     let container = getContainer(this);
 
     container.className += container.className.length ? ' modal-open' : 'modal-open';
@@ -199,6 +231,10 @@ const Modal = React.createClass({
     this._onDocumentKeyupListener.remove();
     this._onWindowResizeListener.remove();
 
+    if (this._onFocusinListener) {
+      this._onFocusinListener.remove();
+    }
+
     let container = getContainer(this);
 
     container.className = container.className.replace(/ ?modal-open/, '');
@@ -237,6 +273,19 @@ const Modal = React.createClass({
     }
   },
 
+  enforceFocus() {
+    if ( !this.isMounted() ) {
+      return;
+    }
+
+    let active = domUtils.activeElement(this)
+      , modal = React.findDOMNode(this.refs.modal);
+
+    if (modal !== active && !domUtils.contains(modal, active)){
+      modal.focus();
+    }
+  },
+
   _getStyles() {
     if ( !domUtils.canUseDom ) { return {}; }
 

src/utils/domUtils.js

@@ -26,6 +26,20 @@ function ownerWindow(componentOrElement) {
        : doc.parentWindow;
 }
 
+/**
+ * get the active element, safe in IE
+ * @return {HTMLElement}
+ */
+function getActiveElement(componentOrElement){
+  let doc = ownerDocument(componentOrElement);
+
+  try {
+    return doc.activeElement || doc.body;
+  } catch (e) {
+    return doc.body;
+  }
+}
+
 /**
  * Shortcut to compute element style
  *
@@ -160,5 +174,6 @@ export default {
   getComputedStyles,
   getOffset,
   getPosition,
+  activeElement: getActiveElement,
   offsetParent: offsetParentFunc
 };