Display suggestions even when backspace is pressed in codehinter

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>