Fix CodeEditor Enter key handling using wrong offset; Fix first drop down item not active

Author: haschek

CHANGELOG.md

@@ -9,7 +9,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 ### Added
 
 -   Extended existing height and readOnly props from `CodeEditorProps` to `AutoSuggestionProps` & `ExtendedCodeEditorProps` to be configurable from `<CodeAutocompleteField />`
--   `<CodeAutocompleteField />:
+-   `<CodeAutocompleteField />`:
     -    outerDivAttributes parameter: Allows to set parameter of the container div element of the code complete field.
 
 ### Fixed
@@ -18,6 +18,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -    Editor is re-created after certain property changes and is reset, i.e. loses it current state.
 -   <CodeAutocompleteField />:
     -    Read-only mode does not work correctly. It is still possible to change the value via pressing Enter (in multiline mode) or clicking the clear button.
+-   `<CodeEditor />`:
+    -    Enter key handling (adding new line) broken when `onKeyDown` is defined.
+-   `<CodeAutocompleteField />`:
+    -    First auto-completion item not marked as active when drop down first shown.
 
 
 ## [24.3.0] - 2025-06-05

src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -363,7 +363,7 @@ const AutoSuggestion = ({
             editorState.suggestions = [];
             setSuggestions([]);
         }
-        editorState.index = 0;
+        setCurrentIndex(0);
     }, [suggestionResponse, editorState]);
 
     const getOffsetRange = (cm: EditorView, from: number, to: number) => {
@@ -377,7 +377,7 @@ const AutoSuggestion = ({
         return { fromOffset, toOffset };
     };
 
-    const inputactionsDisplayed = React.useCallback((node) => {
+    const inputActionsDisplayed = React.useCallback((node) => {
         if (!node) return;
         const width = node.offsetWidth;
         const slCodeEditor = node.parentElement.getElementsByClassName(`${eccgui}-singlelinecodeeditor`);
@@ -491,8 +491,7 @@ const AutoSuggestion = ({
         }, 1);
     };
 
-    //todo check out typings for event type
-    const handleInputEditorKeyPress = (event: any) => {
+    const handleInputEditorKeyPress = (event: KeyboardEvent) => {
         const overWrittenKeys: Array<string> = Object.values(OVERWRITTEN_KEYS);
         if (overWrittenKeys.includes(event.key) && (useTabForCompletions || event.key !== OVERWRITTEN_KEYS.Tab)) {
             //don't prevent when enter should create new line (multiline config) and dropdown isn't shown
@@ -628,6 +627,7 @@ const AutoSuggestion = ({
                     break;
                 default:
                 //do nothing
+                    closeDropDown();
             }
         }
     };
@@ -716,7 +716,7 @@ const AutoSuggestion = ({
                     {codeEditor}
                 </ContextOverlay>
                 {!!value.current && (
-                    <span className={BlueprintClassNames.INPUT_ACTION} ref={inputactionsDisplayed}>
+                    <span className={BlueprintClassNames.INPUT_ACTION} ref={inputActionsDisplayed}>
                         <IconButton
                             data-test-id={"value-path-clear-btn"}
                             name="operation-clear"

src/extensions/codemirror/CodeMirror.tsx

@@ -54,7 +54,7 @@ export interface CodeEditorProps extends TestableComponent {
      * Handler method to receive onChange events.
      * As input the new value is given.
      */
-    onChange?: (v: any) => void;
+    onChange?: (v: string) => void;
     /**
      *  Called when the focus status changes
      */
@@ -74,7 +74,7 @@ export interface CodeEditorProps extends TestableComponent {
     /**
      * Called when the cursor position changes
      */
-    onCursorChange?: (pos: number, coords: Rect, scrollinfo: HTMLElement, cm: EditorView) => any;
+    onCursorChange?: (pos: number, coords: Rect, scrollinfo: HTMLElement, cm: EditorView) => void;
 
     /**
      * Syntax mode of the code editor.
@@ -83,7 +83,7 @@ export interface CodeEditorProps extends TestableComponent {
     /**
      * Default value used first when the editor is instanciated.
      */
-    defaultValue?: any;
+    defaultValue?: string;
     /**
      * If enabled the code editor won't show numbers before each line.
      */
@@ -169,7 +169,7 @@ export interface CodeEditorProps extends TestableComponent {
 }
 
 const addExtensionsFor = (flag: boolean, ...extensions: Extension[]) => (flag ? [...extensions] : []);
-const addToKeyMapConfigFor = (flag: boolean, ...keys: any) => (flag ? [...keys] : []);
+const addToKeyMapConfigFor = (flag: boolean, ...keys: KeyBinding[]) => (flag ? [...keys] : []);
 const addHandlersFor = (flag: boolean, handlerName: string, handler: any) =>
     flag ? ({ [handlerName]: handler } as DOMEventHandlers<any>) : {};
 
@@ -259,15 +259,13 @@ export const CodeEditor = ({
         if (onKeyDown && !onKeyDown(event)) {
             if (event.key === "Enter" && !currentReadOnly.current) {
                 const cursor = view.state.selection.main.head;
-                const cursorLine = view.state.doc.lineAt(cursor).number;
-                const offsetFromFirstLine = view.state.doc.line(cursorLine).to;
                 view.dispatch({
                     changes: {
-                        from: offsetFromFirstLine,
+                        from: cursor,
                         insert: "\n",
                     },
                     selection: {
-                        anchor: offsetFromFirstLine + 1,
+                        anchor: cursor + 1,
                     },
                 });
             }