Merge pull request #47 from smiclea/CORWEB-74

Close any modal on ESC key press CORWEB-74

src/components/AddCloudConnection/AddCloudConnection.js

@@ -97,6 +97,10 @@ class AddCloudConnection extends Reflux.Component {
     } else if (this.props.cloud) {
       this.chooseCloud(this.props.cloud)
     }
+
+    // Fixes an issue with focus when multiple modals are rendered and escape key is not captured.
+    // Test with adding cloud connection from wizard.
+    setTimeout(() => { this.rootDiv.focus() }, 100)
   }
 
   /**
@@ -572,7 +576,7 @@ class AddCloudConnection extends Reflux.Component {
       modalBody = this.renderCloudFields(this.state.currentCloud)
     }
     return (
-      <div className={s.root}>
+      <div tabIndex="0" className={s.root} ref={rootDiv => { this.rootDiv = rootDiv }}>
         <div className={s.header}>
           <h3>{title}</h3>
         </div>

src/components/CloudConnectionsView/CloudConnectionsView.js

@@ -239,6 +239,7 @@ class CloudConnectionsView extends Component {
             isOpen={this.state.showModal}
             contentLabel="Add new cloud connection"
             style={modalStyle}
+            onRequestClose={this.closeModal.bind(this)}
           >
             <AddCloudConnection
               closeHandle={(e) => this.closeModal(e)}
@@ -252,6 +253,7 @@ class CloudConnectionsView extends Component {
             isOpen={this.state.showValidationModal}
             contentLabel="Validate Endpoint"
             style={validationModalStyle}
+            onRequestClose={this.closeValidationModal.bind(this)}
           >
             <ValidateEndpoint
               closeHandle={(e) => this.closeValidationModal(e)}

src/components/CloudItem/CloudItem.js

@@ -165,6 +165,7 @@ class CloudItem extends Component {
           isOpen={this.state.showModal}
           contentLabel="Add new cloud connection"
           style={modalStyle}
+          onRequestClose={this.closeModal.bind(this)}
         >
           <AddCloudConnection
             closeHandle={(e) => this.closeModal(e)}

src/components/ConfirmationDialog/ConfirmationDialog.js

@@ -75,6 +75,7 @@ class ConfirmationDialog extends Component {
             isOpen={this.props.visible}
             contentLabel="Add new cloud connection"
             style={modalStyle}
+            onRequestClose={this.onCancel.bind(this)}
           >
             <p className={s.message}>{this.props.message}</p>
             <div className={s.buttons}>

src/components/EndpointList/EndpointList.js

@@ -193,6 +193,7 @@ class EndpointList extends Reflux.Component {
             isOpen={this.state.showModal}
             contentLabel="Add new cloud connection"
             style={modalStyle}
+            onRequestClose={this.closeModal.bind(this)}
           >
             <AddCloudConnection
               closeHandle={(e) => this.closeModal(e)}
@@ -230,6 +231,7 @@ class EndpointList extends Reflux.Component {
             isOpen={this.state.showModal}
             contentLabel="Add new cloud connection"
             style={modalStyle}
+            onRequestClose={this.closeModal.bind(this)}
           >
             <AddCloudConnection
               closeHandle={(e) => this.closeModal(e)}

src/components/UserOverview/UserOverview.js

@@ -140,6 +140,7 @@ class UserOverview extends Reflux.Component {
           isOpen={this.state.showModal}
           contentLabel="Edit Profile"
           style={modalStyle}
+          onRequestClose={this.closeModal.bind(this)}
         >
           <EditProfile
             closeHandle={(e) => this.closeModal(e)}