From 6947f4b7a0e5272721d42bbaec26d122a3fcbec4 Mon Sep 17 00:00:00 2001
From: Rishabh Saxena <rishabh.robben@gmail.com>
Date: Mon, 19 Jul 2021 17:36:04 +0530
Subject: [PATCH] [Fix] Fix mouse click for the autocomplete at the api pane
 (#5929)

* Set editor height in compact mode when not in focus
---
 .../cypress/locators/apiWidgetslocator.json     |  2 +-
 .../editorComponents/CodeEditor/index.tsx       | 17 ++---------------
 .../CodeEditor/styledComponents.ts              |  8 ++++++++
 .../DynamicInputTextControl.test.tsx            |  4 ++--
 4 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/app/client/cypress/locators/apiWidgetslocator.json b/app/client/cypress/locators/apiWidgetslocator.json
index c49c628b0b..5d4169d523 100644
--- a/app/client/cypress/locators/apiWidgetslocator.json
+++ b/app/client/cypress/locators/apiWidgetslocator.json
@@ -25,7 +25,7 @@
   "marketPlaceapi": ".t--eachProviderCard p",
   "addPageButton": ".t--addToPageBtn",
   "apidocumentaionLink": ".t--apiDocumentationLink",
-  "postbody": "(//div[contains(@class,'CodeMirror-wrap')]//textarea)[1]",
+  "postbody": "(//div[contains(@class,'CodeMirror-wrap')]//textarea)[2]",
   "paginationTab": "li:contains('Pagination')",
   "apiInputTab": "li:contains('API Input')",
   "paginationOption": ".t--apiFormPaginationType div>input",
diff --git a/app/client/src/components/editorComponents/CodeEditor/index.tsx b/app/client/src/components/editorComponents/CodeEditor/index.tsx
index 20027150f9..dc5eee8cf5 100644
--- a/app/client/src/components/editorComponents/CodeEditor/index.tsx
+++ b/app/client/src/components/editorComponents/CodeEditor/index.tsx
@@ -168,7 +168,7 @@ class CodeEditor extends Component<Props, State> {
         tabSize: 2,
         autoCloseBrackets: true,
         indentWithTabs: this.props.tabBehaviour === TabBehaviour.INDENT,
-        lineWrapping: this.props.size !== EditorSize.COMPACT,
+        lineWrapping: true,
         lineNumbers: this.props.showLineNumbers,
         addModeClass: true,
         matchBrackets: false,
@@ -261,9 +261,7 @@ class CodeEditor extends Component<Props, State> {
         // Safe update of value of the editor when value updated outside the editor
         const inputValue = getInputValue(this.props.input.value);
         if (!!inputValue || inputValue === "") {
-          if (this.props.size === EditorSize.COMPACT) {
-            this.editor.setValue(removeNewLineChars(inputValue));
-          } else if (inputValue !== editorValue) {
+          if (inputValue !== editorValue) {
             this.editor.setValue(inputValue);
           }
         }
@@ -327,14 +325,6 @@ class CodeEditor extends Component<Props, State> {
 
   handleEditorFocus = () => {
     this.setState({ isFocused: true });
-    if (this.props.size === EditorSize.COMPACT) {
-      this.editor.operation(() => {
-        const inputValue = this.props.input.value;
-        this.editor.setOption("lineWrapping", true);
-        this.editor.setValue(inputValue);
-        this.editor.setCursor(inputValue.length);
-      });
-    }
     if (this.editor.getValue().length === 0)
       this.handleAutocompleteVisibility(this.editor);
   };
@@ -342,9 +332,6 @@ class CodeEditor extends Component<Props, State> {
   handleEditorBlur = () => {
     this.handleChange();
     this.setState({ isFocused: false });
-    if (this.props.size === EditorSize.COMPACT) {
-      this.editor.setOption("lineWrapping", false);
-    }
     this.editor.setOption("matchBrackets", false);
   };
 
diff --git a/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts b/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
index 64d6947c5e..becf022cf1 100644
--- a/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
+++ b/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
@@ -243,6 +243,14 @@ export const EditorWrapper = styled.div<{
           position: relative;
         `}
     ${(props) => (props.isFocused ? `z-index: 3;` : `z-index: 0;`)}
+
+    ${(props) => {
+      let height = props.height || "auto";
+      if (props.size === EditorSize.COMPACT && !props.isFocused) {
+        height = props.height || "32px";
+      }
+      return `height: ${height}`;
+    }}
   }
 `;
 
diff --git a/app/client/src/components/formControls/DynamicInputTextControl.test.tsx b/app/client/src/components/formControls/DynamicInputTextControl.test.tsx
index a055dd7aa0..979f92213c 100644
--- a/app/client/src/components/formControls/DynamicInputTextControl.test.tsx
+++ b/app/client/src/components/formControls/DynamicInputTextControl.test.tsx
@@ -38,9 +38,9 @@ describe("DynamicInputTextControl", () => {
       {},
     );
 
-    const input = screen.getAllByText("My test value")[0];
-    userEvent.type(input, "New text");
     waitFor(async () => {
+      const input = screen.getAllByText("My test value")[0];
+      userEvent.type(input, "New text");
       await expect(screen.getAllByText("New text")).toHaveLength(2);
       await expect(screen.findByText("My test value")).toBeNull();
     });