Fix focus on Modal (#4014)

* Fix focus on Modal #3814

* PR Grumble

js/src/ui/Container/container.js

@@ -30,15 +30,22 @@ export default class Container extends Component {
     compact: PropTypes.bool,
     light: PropTypes.bool,
     style: PropTypes.object,
+    tabIndex: PropTypes.number,
     title: nodeOrStringProptype()
   }
 
   render () {
-    const { children, className, compact, light, style } = this.props;
+    const { children, className, compact, light, style, tabIndex } = this.props;
     const classes = `${styles.container} ${light ? styles.light : ''} ${className}`;
 
+    const props = {};
+
+    if (Number.isInteger(tabIndex)) {
+      props.tabIndex = tabIndex;
+    }
+
     return (
-      <div className={ classes } style={ style }>
+      <div className={ classes } style={ style } { ...props }>
         <Card className={ compact ? styles.compact : styles.padded }>
           { this.renderTitle() }
           { children }

js/src/ui/Modal/modal.js

@@ -18,6 +18,7 @@ import { Dialog } from 'material-ui';
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import ReactDOM from 'react-dom';
 
 import { nodeOrStringProptype } from '~/util/proptypes';
 
@@ -49,6 +50,14 @@ class Modal extends Component {
     waiting: PropTypes.array
   }
 
+  componentDidMount () {
+    const element = ReactDOM.findDOMNode(this.refs.dialog);
+
+    if (element) {
+      element.focus();
+    }
+  }
+
   render () {
     const { muiTheme } = this.context;
     const { actions, busy, children, className, current, compact, settings, steps, title, visible, waiting } = this.props;
@@ -85,9 +94,12 @@ class Modal extends Component {
         <Container
           compact={ compact }
           light
+          ref='dialog'
           style={
             { transition: 'none' }
-          }>
+          }
+          tabIndex={ 0 }
+        >
           { children }
         </Container>
       </Dialog>