From 0f41c5b847495849eebd83e55e85a62c366b6441 Mon Sep 17 00:00:00 2001
From: Nicolas Gotchac <ngotchac@gmail.com>
Date: Tue, 3 Jan 2017 17:41:31 +0100
Subject: [PATCH] Fix focus on Modal (#4014)

* Fix focus on Modal #3814

* PR Grumble
---
 js/src/ui/Container/container.js | 11 +++++++++--
 js/src/ui/Modal/modal.js         | 14 +++++++++++++-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/js/src/ui/Container/container.js b/js/src/ui/Container/container.js
index 51a6a5daa..5d4127959 100644
--- a/js/src/ui/Container/container.js
+++ b/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 }
diff --git a/js/src/ui/Modal/modal.js b/js/src/ui/Modal/modal.js
index 0b56692a8..d9d6ddbaf 100644
--- a/js/src/ui/Modal/modal.js
+++ b/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>