From ac3cf363b7817fa957275d7e8b6fa704ed4388b9 Mon Sep 17 00:00:00 2001
From: Jesse Hallam <jesse.hallam@gmail.com>
Date: Fri, 9 Nov 2018 16:37:34 -0500
Subject: [PATCH] MM-12944: force "Delete" focus on showing delete post modal
 (#2020)

Focus handling is a mess. This doesn't really make it much better, other than making the behaviour explicit and constrained to within the modal dialog in question, fixing a regression introduced by MM-12688.
---
 .../delete_post_modal/delete_post_modal.jsx   | 24 +++++++------------
 .../delete_post_modal.test.jsx.snap           |  2 ++
 tests/components/delete_post_modal.test.jsx   | 12 ++++++++++
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/components/delete_post_modal/delete_post_modal.jsx b/components/delete_post_modal/delete_post_modal.jsx
index 27ee9a01ca65..e77b96f2e5ae 100644
--- a/components/delete_post_modal/delete_post_modal.jsx
+++ b/components/delete_post_modal/delete_post_modal.jsx
@@ -17,30 +17,15 @@ export default class DeletePostModal extends React.PureComponent {
         teamName: PropTypes.string,
         post: PropTypes.object.isRequired,
         commentCount: PropTypes.number.isRequired,
-
-        /**
-         * Does the post come from RHS mode
-         */
         isRHS: PropTypes.bool.isRequired,
-
-        /**
-        * Function called when modal is dismissed
-        */
         onHide: PropTypes.func.isRequired,
-
         actions: PropTypes.shape({
-
-            /**
-            * Function called for deleting post
-            */
             deleteAndRemovePost: PropTypes.func.isRequired,
         }),
     }
 
     constructor(props) {
         super(props);
-        this.handleDelete = this.handleDelete.bind(this);
-        this.onHide = this.onHide.bind(this);
         this.state = {
             show: true,
         };
@@ -66,7 +51,13 @@ export default class DeletePostModal extends React.PureComponent {
         }
     }
 
-    onHide() {
+    handleEntered = () => {
+        if (this.deletePostBtn) {
+            this.deletePostBtn.focus();
+        }
+    }
+
+    onHide = () => {
         this.setState({show: false});
 
         if (!UserAgent.isMobile()) {
@@ -111,6 +102,7 @@ export default class DeletePostModal extends React.PureComponent {
         return (
             <Modal
                 show={this.state.show}
+                onEntered={this.handleEntered}
                 onHide={this.onHide}
                 onExited={this.props.onHide}
                 enforceFocus={false}
diff --git a/tests/components/__snapshots__/delete_post_modal.test.jsx.snap b/tests/components/__snapshots__/delete_post_modal.test.jsx.snap
index 7644f1d2f87c..85b3b09f65cd 100644
--- a/tests/components/__snapshots__/delete_post_modal.test.jsx.snap
+++ b/tests/components/__snapshots__/delete_post_modal.test.jsx.snap
@@ -21,6 +21,7 @@ exports[`components/delete_post_modal should match snapshot for delete_post_moda
       "remove": [Function],
     }
   }
+  onEntered={[Function]}
   onExited={[MockFunction]}
   onHide={[Function]}
   renderBackdrop={[Function]}
@@ -123,6 +124,7 @@ exports[`components/delete_post_modal should match snapshot for delete_post_moda
       "remove": [Function],
     }
   }
+  onEntered={[Function]}
   onExited={[MockFunction]}
   onHide={[Function]}
   renderBackdrop={[Function]}
diff --git a/tests/components/delete_post_modal.test.jsx b/tests/components/delete_post_modal.test.jsx
index 13018546956b..65bfcd729512 100644
--- a/tests/components/delete_post_modal.test.jsx
+++ b/tests/components/delete_post_modal.test.jsx
@@ -43,6 +43,18 @@ describe('components/delete_post_modal', () => {
         expect(wrapper).toMatchSnapshot();
     });
 
+    test('should focus delete button on enter', () => {
+        const wrapper = shallow(
+            <DeletePostModal {...baseProps}/>
+        );
+
+        const deletePostBtn = {focus: jest.fn()};
+        wrapper.instance().deletePostBtn = deletePostBtn;
+
+        wrapper.instance().handleEntered();
+        expect(deletePostBtn.focus).toHaveBeenCalled();
+    });
+
     test('should match state when onHide is called', () => {
         const wrapper = shallow(
             <DeletePostModal {...baseProps}/>