From d3102e6c07245fa5aea5967190a1862f956e7e48 Mon Sep 17 00:00:00 2001
From: Sherfin Shamsudeen <sherfin94@gmail.com>
Date: Wed, 15 Jan 2025 18:21:01 +0530
Subject: [PATCH] Display suggestions even when backspace is pressed in
 codehinter

---
 .../CodeEditor/SingleLineCodeEditor.jsx         | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx b/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx
index f59d15e591..5739fd33f0 100644
--- a/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx
+++ b/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx
@@ -6,7 +6,13 @@ import { useTranslation } from 'react-i18next';
 import { camelCase, isEmpty, noop } from 'lodash';
 import CodeMirror from '@uiw/react-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
-import { autocompletion, completionKeymap, completionStatus, acceptCompletion } from '@codemirror/autocomplete';
+import {
+  autocompletion,
+  completionKeymap,
+  completionStatus,
+  acceptCompletion,
+  startCompletion,
+} from '@codemirror/autocomplete';
 import { defaultKeymap } from '@codemirror/commands';
 import { keymap } from '@codemirror/view';
 import FxButton from '../CodeBuilder/Elements/FxButton';
@@ -157,6 +163,7 @@ const EditorInput = ({
   disabled = false,
 }) => {
   const getSuggestions = useStore((state) => state.getSuggestions, shallow);
+  const [codeMirrorView, setCodeMirrorView] = useState(undefined);
   function autoCompleteExtensionConfig(context) {
     const hints = getSuggestions();
     let word = context.matchBefore(/\w*/);
@@ -314,6 +321,9 @@ const EditorInput = ({
       >
         <ErrorBoundary>
           <CodeMirror
+            onCreateEditor={(view) => {
+              setCodeMirrorView(view);
+            }}
             value={currentValue}
             placeholder={placeholder}
             height={showLineNumbers ? '400px' : '100%'}
@@ -344,6 +354,11 @@ const EditorInput = ({
             theme={theme}
             indentWithTab={false}
             readOnly={disabled}
+            onKeyDown={(event) => {
+              if (event.key === 'Backspace') {
+                startCompletion(codeMirrorView);
+              }
+            }}
           />
         </ErrorBoundary>
       </CodeHinter.Portal>