From 34b62abab1e8f5b1a9e0cab51c323b072f590493 Mon Sep 17 00:00:00 2001
From: Jonatan Rinckus <Jonatan@bedatse.com>
Date: Fri, 3 Apr 2020 20:10:01 -0300
Subject: [PATCH] Implemented escape to dismiss response templates

---
 .../modules/common/components/editor/Editor.tsx |  3 +++
 .../conversationDetail/workarea/Editor.tsx      | 17 ++++++++++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/ui/src/modules/common/components/editor/Editor.tsx b/ui/src/modules/common/components/editor/Editor.tsx
index a797c284636..d7850805497 100755
--- a/ui/src/modules/common/components/editor/Editor.tsx
+++ b/ui/src/modules/common/components/editor/Editor.tsx
@@ -35,6 +35,7 @@ type ErxesEditorProps = {
   keyBindingFn?: (e: any) => any;
   onUpArrow?: (e: KeyboardEvent) => void;
   onDownArrow?: (e: KeyboardEvent) => void;
+  onEscape?: (e: KeyboardEvent) => void;
   handleFileInput?: (e: React.FormEvent<HTMLInputElement>) => void;
   placeholder?: string | React.ReactNode;
 };
@@ -128,6 +129,7 @@ export class ErxesEditor extends React.Component<ErxesEditorProps> {
       controls,
       onUpArrow,
       onDownArrow,
+      onEscape,
       bordered,
       isTopPopup = false,
       plugins
@@ -172,6 +174,7 @@ export class ErxesEditor extends React.Component<ErxesEditorProps> {
             keyBindingFn={this.props.keyBindingFn}
             onUpArrow={onUpArrow}
             onDownArrow={onDownArrow}
+            onEscape={onEscape}
             ref={element => {
               this.editor = element;
             }}
diff --git a/ui/src/modules/inbox/components/conversationDetail/workarea/Editor.tsx b/ui/src/modules/inbox/components/conversationDetail/workarea/Editor.tsx
index add08f020ec..80e34f3cacd 100644
--- a/ui/src/modules/inbox/components/conversationDetail/workarea/Editor.tsx
+++ b/ui/src/modules/inbox/components/conversationDetail/workarea/Editor.tsx
@@ -38,6 +38,7 @@ type State = {
   collectedMentions: any;
   suggestions: any;
   templatesState: any;
+  hideTemplates: boolean;
 };
 
 const MentionEntry = props => {
@@ -91,7 +92,8 @@ export default class Editor extends React.Component<EditorProps, State> {
       ),
       collectedMentions: [],
       suggestions: this.props.mentions.toArray(),
-      templatesState: null
+      templatesState: null,
+      hideTemplates: false
     };
 
     this.mentionPlugin = createMentionPlugin({
@@ -126,7 +128,7 @@ export default class Editor extends React.Component<EditorProps, State> {
   }
 
   onChange = editorState => {
-    this.setState({ editorState });
+    this.setState({ editorState, hideTemplates: false });
 
     this.props.onChange(this.getContent(editorState));
 
@@ -235,11 +237,15 @@ export default class Editor extends React.Component<EditorProps, State> {
     this.onArrow(e, 1);
   };
 
+  onEscape = () => {
+    this.setState({ hideTemplates: true });
+  }
+
   // Render response templates suggestions
   renderTemplates() {
-    const { templatesState } = this.state;
+    const { templatesState, hideTemplates } = this.state;
 
-    if (!templatesState) {
+    if (!templatesState || hideTemplates) {
       return null;
     }
 
@@ -312,7 +318,7 @@ export default class Editor extends React.Component<EditorProps, State> {
     // handle enter  in editor
     if (e.key === 'Enter') {
       // select response template
-      if (this.state.templatesState) {
+      if (this.state.templatesState && !this.state.hideTemplates) {
         this.onSelectTemplate();
 
         return null;
@@ -359,6 +365,7 @@ export default class Editor extends React.Component<EditorProps, State> {
       keyBindingFn: this.keyBindingFn,
       onUpArrow: this.onUpArrow,
       onDownArrow: this.onDownArrow,
+      onEscape: this.onEscape,
       handleFileInput: this.props.handleFileInput,
       isTopPopup: true,
       plugins,