Added handling of keyboard focus to UserSettingsModal and its children

4 files changed, 51 insertions, 11 deletions

diff --git a/web/react/components/user_settings/user_settings.jsx b/web/react/components/user_settings/user_settings.jsx
index d569b9d6e..cebbbebce 100644
--- a/web/react/components/user_settings/user_settings.jsx
+++ b/web/react/components/user_settings/user_settings.jsx
@@ -56,6 +56,7 @@ export default class UserSettings extends React.Component {
                         activeSection={this.props.activeSection}
                         updateSection={this.props.updateSection}
                         updateTab={this.props.updateTab}
+                        setEnforceFocus={this.props.setEnforceFocus}
                     />
                 </div>
             );
@@ -77,6 +78,7 @@ export default class UserSettings extends React.Component {
                         activeSection={this.props.activeSection}
                         updateSection={this.props.updateSection}
                         updateTab={this.props.updateTab}
+                        setEnforceFocus={this.props.setEnforceFocus}
                         setRequireConfirm={this.props.setRequireConfirm}
                     />
                 </div>
@@ -134,5 +136,6 @@ UserSettings.propTypes = {
     activeSection: React.PropTypes.string,
     updateSection: React.PropTypes.func,
     updateTab: React.PropTypes.func,
+    setEnforceFocus: React.PropTypes.func.isRequired,
     setRequireConfirm: React.PropTypes.func.isRequired
 };
diff --git a/web/react/components/user_settings/user_settings_appearance.jsx b/web/react/components/user_settings/user_settings_appearance.jsx
index b3584e992..28fc9018a 100644
--- a/web/react/components/user_settings/user_settings_appearance.jsx
+++ b/web/react/components/user_settings/user_settings_appearance.jsx
@@ -72,6 +72,8 @@ export default class UserSettingsAppearance extends React.Component {
         if (!Utils.areStatesEqual(this.state, newState)) {
             this.setState(newState);
         }
+
+        this.props.setEnforceFocus(true);
     }
     submitTheme(e) {
         e.preventDefault();
@@ -138,6 +140,8 @@ export default class UserSettingsAppearance extends React.Component {
             type: ActionTypes.TOGGLE_IMPORT_THEME_MODAL,
             value: true
         });
+
+        this.props.setEnforceFocus(false);
     }
     render() {
         var serverError;
@@ -258,5 +262,6 @@ UserSettingsAppearance.defaultProps = {
 UserSettingsAppearance.propTypes = {
     activeSection: React.PropTypes.string,
     updateTab: React.PropTypes.func,
-    setRequireConfirm: React.PropTypes.func.isRequired
+    setRequireConfirm: React.PropTypes.func.isRequired,
+    setEnforceFocus: React.PropTypes.func.isRequired
 };
diff --git a/web/react/components/user_settings/user_settings_modal.jsx b/web/react/components/user_settings/user_settings_modal.jsx
index 4cfc2b3d4..94b07f3a5 100644
--- a/web/react/components/user_settings/user_settings_modal.jsx
+++ b/web/react/components/user_settings/user_settings_modal.jsx
@@ -13,6 +13,7 @@ export default class UserSettingsModal extends React.Component {
         this.handleHide = this.handleHide.bind(this);
         this.handleHidden = this.handleHidden.bind(this);
         this.handleConfirm = this.handleConfirm.bind(this);
+        this.handleCancelConfirmation = this.handleCancelConfirmation.bind(this);
 
         this.updateTab = this.updateTab.bind(this);
         this.updateSection = this.updateSection.bind(this);
@@ -20,7 +21,8 @@ export default class UserSettingsModal extends React.Component {
         this.state = {
             active_tab: 'general',
             active_section: '',
-            showConfirmModal: false
+            showConfirmModal: false,
+            enforceFocus: true
         };
 
         this.requireConfirm = false;
@@ -78,7 +80,8 @@ export default class UserSettingsModal extends React.Component {
 
     handleConfirm() {
         this.setState({
-            showConfirmModal: false
+            showConfirmModal: false,
+            enforceFocus: true
         });
 
         this.requireConfirm = false;
@@ -89,9 +92,17 @@ export default class UserSettingsModal extends React.Component {
         }
     }
 
+    handleCancelConfirmation() {
+        this.setState({
+            showConfirmModal: false,
+            enforceFocus: true
+        });
+    }
+
     showConfirmModal() {
         this.setState({
-            showConfirmModal: true
+            showConfirmModal: true,
+            enforceFocus: false
         });
     }
 
@@ -136,8 +147,9 @@ export default class UserSettingsModal extends React.Component {
             <Modal
                 dialogClassName='settings-modal'
                 show={this.props.show}
-                onHide={() => this.handleHide()}
+                onHide={this.handleHide}
                 onExited={this.handleHidden}
+                enforceFocus={this.state.enforceFocus}
             >
                 <Modal.Header closeButton={true}>
                     <Modal.Title>{'Account Settings'}</Modal.Title>
@@ -158,6 +170,7 @@ export default class UserSettingsModal extends React.Component {
                                 activeSection={this.state.active_section}
                                 updateSection={this.updateSection}
                                 updateTab={this.updateTab}
+                                setEnforceFocus={(enforceFocus) => this.setState({enforceFocus})}
                                 setRequireConfirm={(requireConfirm) => this.requireConfirm = requireConfirm}
                             />
                         </div>
@@ -169,7 +182,7 @@ export default class UserSettingsModal extends React.Component {
                     confirm_button='Yes, Discard'
                     show={this.state.showConfirmModal}
                     onConfirm={this.handleConfirm}
-                    onCancel={() => this.setState({showConfirmModal: false})}
+                    onCancel={this.handleCancelConfirmation}
                 />
             </Modal>
         );
diff --git a/web/react/components/user_settings/user_settings_security.jsx b/web/react/components/user_settings/user_settings_security.jsx
index d4d6bf035..c2b8a0093 100644
--- a/web/react/components/user_settings/user_settings_security.jsx
+++ b/web/react/components/user_settings/user_settings_security.jsx
@@ -13,6 +13,9 @@ export default class SecurityTab extends React.Component {
     constructor(props) {
         super(props);
 
+        this.showAccessHistoryModal = this.showAccessHistoryModal.bind(this);
+        this.showActivityLogModal = this.showActivityLogModal.bind(this);
+        this.hideModals = this.hideModals.bind(this);
         this.submitPassword = this.submitPassword.bind(this);
         this.updateCurrentPassword = this.updateCurrentPassword.bind(this);
         this.updateNewPassword = this.updateNewPassword.bind(this);
@@ -24,6 +27,21 @@ export default class SecurityTab extends React.Component {
         state.showActivityLogModal = false;
         this.state = state;
     }
+    showAccessHistoryModal() {
+        this.props.setEnforceFocus(false);
+        this.setState({showAccessHistoryModal: true});
+    }
+    showActivityLogModal() {
+        this.props.setEnforceFocus(false);
+        this.setState({showActivityLogModal: true});
+    }
+    hideModals() {
+        this.props.setEnforceFocus(true);
+        this.setState({
+            showAccessHistoryModal: false,
+            showActivityLogModal: false
+        });
+    }
     submitPassword(e) {
         e.preventDefault();
 
@@ -238,7 +256,7 @@ export default class SecurityTab extends React.Component {
                     <a
                         className='security-links theme'
                         href='#'
-                        onClick={() => this.setState({showAccessHistoryModal: true})}
+                        onClick={this.showAccessHistoryModal}
                     >
                         <i className='fa fa-clock-o'></i>View Access History
                     </a>
@@ -246,18 +264,18 @@ export default class SecurityTab extends React.Component {
                     <a
                         className='security-links theme'
                         href='#'
-                        onClick={() => this.setState({showActivityLogModal: true})}
+                        onClick={this.showActivityLogModal}
                     >
                         <i className='fa fa-globe'></i>View and Logout of Active Sessions
                     </a>
                 </div>
                 <AccessHistoryModal
                     show={this.state.showAccessHistoryModal}
-                    onModalDismissed={() => this.setState({showAccessHistoryModal: false})}
+                    onModalDismissed={this.hideModals}
                 />
                 <ActivityLogModal
                     show={this.state.showActivityLogModal}
-                    onModalDismissed={() => this.setState({showActivityLogModal: false})}
+                    onModalDismissed={this.hideModals}
                 />
             </div>
         );
@@ -272,5 +290,6 @@ SecurityTab.propTypes = {
     user: React.PropTypes.object,
     activeSection: React.PropTypes.string,
     updateSection: React.PropTypes.func,
-    updateTab: React.PropTypes.func
+    updateTab: React.PropTypes.func,
+    setEnforceFocus: React.PropTypes.func.isRequired
 };