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