diff --git a/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx b/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx index 9c5778cc7b..cdfc8754f8 100644 --- a/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx +++ b/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx @@ -191,6 +191,8 @@ const THEMES = { type THEME = "LIGHT" | "DARK"; +const AUTOCOMPLETE_CLOSE_KEY_CODES = ["Enter", "Tab", "Escape"]; + interface ReduxStateProps { dynamicData: DataTree; } @@ -258,7 +260,7 @@ class DynamicAutocompleteInput extends Component { ...options, }); this.editor.on("change", _.debounce(this.handleChange, 300)); - this.editor.on("cursorActivity", this.handleAutocompleteVisibility); + this.editor.on("keyup", this.handleAutocompleteVisibility); this.editor.on("focus", this.handleEditorFocus); this.editor.on("blur", this.handleEditorBlur); this.editor.setOption("hintOptions", { @@ -335,7 +337,7 @@ class DynamicAutocompleteInput extends Component { this.editor.eachLine(this.highlightBindings); }; - handleAutocompleteVisibility = (cm: any) => { + handleAutocompleteVisibility = (cm: any, event: KeyboardEvent) => { if (this.state.isFocused) { let cursorBetweenBinding = false; const cursor = this.editor.getCursor(); @@ -359,7 +361,12 @@ class DynamicAutocompleteInput extends Component { } cumulativeCharCount = start + segment.length; }); - const shouldShow = cursorBetweenBinding && !cm.state.completionActive; + + const shouldShow = + cursorBetweenBinding && + !cm.state.completionActive && + AUTOCOMPLETE_CLOSE_KEY_CODES.indexOf(event.code) === -1; + if (shouldShow) { AnalyticsUtil.logEvent("AUTO_COMPELTE_SHOW", {}); this.setState({