MM-11964: internalize escape key handling on edit post modal (matterm…

…ost#1723) Skip react-bootstrap's modal handling of the escape key to allow our suggestion box to cancel the event correctly when it intercepts it first.
jespino · Sep 19, 2018 · 561477a · 561477a
1 parent 047cdb8
commit 561477a
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/components/edit_post_modal/edit_post_modal.jsx b/components/edit_post_modal/edit_post_modal.jsx
@@ -225,6 +225,8 @@ export default class EditPostModal extends React.PureComponent {
  handleKeyDown = (e) => {
  if (this.props.ctrlSend && Utils.isKeyPressed(e, KeyCodes.ENTER) && e.ctrlKey === true) {
  this.handleEdit();
+ } else if (Utils.isKeyPressed(e, KeyCodes.ESCAPE)) {
+ this.handleHide();
  }
  }
 
@@ -297,6 +299,7 @@ export default class EditPostModal extends React.PureComponent {
  onEntered={this.handleEntered}
  onExit={this.handleExit}
  onExited={this.handleExited}
+ keyboard={false}
  >
  <Modal.Header closeButton={true}>
  <Modal.Title>

diff --git a/tests/components/__snapshots__/edit_post_modal.test.jsx.snap b/tests/components/__snapshots__/edit_post_modal.test.jsx.snap
@@ -9,7 +9,7 @@ exports[`components/EditPostModal should match with default config 1`] = `
  dialogClassName="edit-modal"
  dialogComponentClass={[Function]}
  enforceFocus={true}
- keyboard={true}
+ keyboard={false}
  manager={
  ModalManager {
  "add": [Function],
@@ -139,7 +139,7 @@ exports[`components/EditPostModal should match without emoji picker 1`] = `
  dialogClassName="edit-modal"
  dialogComponentClass={[Function]}
  enforceFocus={true}
- keyboard={true}
+ keyboard={false}
  manager={
  ModalManager {
  "add": [Function],
@@ -247,7 +247,7 @@ exports[`components/EditPostModal should show emojis on emojis click 1`] = `
  dialogClassName="edit-modal"
  dialogComponentClass={[Function]}
  enforceFocus={true}
- keyboard={true}
+ keyboard={false}
  manager={
  ModalManager {
  "add": [Function],
@@ -377,7 +377,7 @@ exports[`components/EditPostModal should show errors when it is set in the state
  dialogClassName="edit-modal"
  dialogComponentClass={[Function]}
  enforceFocus={true}
- keyboard={true}
+ keyboard={false}
  manager={
  ModalManager {
  "add": [Function],

diff --git a/tests/components/edit_post_modal.test.jsx b/tests/components/edit_post_modal.test.jsx
@@ -412,4 +412,18 @@ describe('components/EditPostModal', () => {
  expect(instance.handleEdit).toBeCalled();
  expect(preventDefault).toBeCalled();
  });
+
+ it('should handle the escape key manually to hide the modal', () => {
+ const options = new ReactRouterEnzymeContext();
+ var wrapper = shallow(createEditPost({ctrlSend: true}), {context: options.get()});
+ var instance = wrapper.instance();
+ instance.handleHide = jest.fn();
+ instance.handleExit = jest.fn();
+
+ instance.handleKeyDown({keyCode: 1});
+ expect(instance.handleHide).not.toBeCalled();
+
+ instance.handleKeyDown({key: Constants.KeyCodes.ESCAPE[0], keyCode: Constants.KeyCodes.ESCAPE[1]});
+ expect(instance.handleHide).toBeCalled();
+ });
 });