[Fix] Fix mouse click for the autocomplete at the api pane (#5929)

* Set editor height in compact mode when not in focus

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",

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) {
+          if (inputValue !== editorValue) {
-            this.editor.setValue(removeNewLineChars(inputValue));
-          } else 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);
   };
 

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}`;
+    }}
   }
 `;
 

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();
     });