Implement Jira Ticket PLT-6555 - Enter should confirm deletion on delete modals (#6375)

3 files changed, 19 insertions, 3 deletions

diff --git a/webapp/components/delete_channel_modal.jsx b/webapp/components/delete_channel_modal.jsx
index 4c5c428d5..59d54e804 100644
--- a/webapp/components/delete_channel_modal.jsx
+++ b/webapp/components/delete_channel_modal.jsx
@@ -11,12 +11,14 @@ import {browserHistory} from 'react-router/es6';
 import React from 'react';
 
 import {deleteChannel} from 'actions/channel_actions.jsx';
+import Constants from 'utils/constants.jsx';
 
 export default class DeleteChannelModal extends React.Component {
     constructor(props) {
         super(props);
 
         this.handleDelete = this.handleDelete.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
         this.onHide = this.onHide.bind(this);
 
         this.state = {show: true};
@@ -35,12 +37,19 @@ export default class DeleteChannelModal extends React.Component {
         this.setState({show: false});
     }
 
+    handleKeyDown(e) {
+        if (e.keyCode === Constants.KeyCodes.ENTER) {
+            this.handleDelete();
+        }
+    }
+
     render() {
         return (
             <Modal
                 show={this.state.show}
                 onHide={this.onHide}
                 onExited={this.props.onHide}
+                onKeyDown={this.handleKeyDown}
             >
                 <Modal.Header closeButton={true}>
                     <h4 className='modal-title'>
diff --git a/webapp/components/delete_modal_trigger.jsx b/webapp/components/delete_modal_trigger.jsx
index 9ccbf33a2..ed30a5467 100644
--- a/webapp/components/delete_modal_trigger.jsx
+++ b/webapp/components/delete_modal_trigger.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import ConfirmModal from './confirm_modal.jsx';
+import Constants from 'utils/constants.jsx';
 
 export default class DeleteModalTrigger extends React.Component {
     constructor(props) {
@@ -11,6 +12,7 @@ export default class DeleteModalTrigger extends React.Component {
         this.handleConfirm = this.handleConfirm.bind(this);
         this.handleCancel = this.handleCancel.bind(this);
         this.handleOpenModal = this.handleOpenModal.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
 
         this.state = {
             showDeleteModal: false
@@ -35,6 +37,12 @@ export default class DeleteModalTrigger extends React.Component {
         });
     }
 
+    handleKeyDown(e) {
+        if (e.keyCode === Constants.KeyCodes.ENTER) {
+            this.handleConfirm(e);
+        }
+    }
+
     render() {
         return (
             <span>
@@ -51,6 +59,7 @@ export default class DeleteModalTrigger extends React.Component {
                     confirmButton={this.modalConfirmButton}
                     onConfirm={this.handleConfirm}
                     onCancel={this.handleCancel}
+                    onKeyDown={this.handleKeyDown}
                 />
             </span>
         );
diff --git a/webapp/components/emoji/components/emoji_list_item.jsx b/webapp/components/emoji/components/emoji_list_item.jsx
index f169b2e9c..e8eaec7a0 100644
--- a/webapp/components/emoji/components/emoji_list_item.jsx
+++ b/webapp/components/emoji/components/emoji_list_item.jsx
@@ -26,9 +26,7 @@ export default class EmojiListItem extends React.Component {
         this.handleDelete = this.handleDelete.bind(this);
     }
 
-    handleDelete(e) {
-        e.preventDefault();
-
+    handleDelete() {
         this.props.onDelete(this.props.emoji);
     }