Update onBlur behavior for code editor (#71)

* update onBlur behavior * upd change log * Update CHANGELOG.md --------- Co-authored-by: Mikhail Volkov <[email protected]>
VolkovLabs · Nov 29, 2024 · 6576094 · 6576094
1 parent 8e0b080
commit 6576094
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 13 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Change Log
 
+## 3.6.0 (2024-11-29)
+
+### Features / Enhancements
+
+- Update AutosizeCodeEditor (#70)
+- Update onBlur behavior for code editor (#71)
+
 ## 3.5.0 (2024-10-23)
 
 ### Features / Enhancements

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -89,5 +89,5 @@
     "typecheck": "tsc --emitDeclarationOnly false --noEmit"
   },
   "types": "dist/index.d.ts",
-  "version": "3.5.1"
+  "version": "3.6.0"
 }
diff --git a/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.test.tsx b/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.test.tsx
@@ -58,7 +58,7 @@ jest.mock('@grafana/ui', () => ({
       </>
     );
   }),
-  CodeEditor: jest.fn(({ value, onChange, height, onEditorDidMount }) => {
+  CodeEditor: jest.fn(({ value, onChange, onBlur, height, onEditorDidMount }) => {
     /**
      * Call the onEditorDidMount callback with the editor instance
      */
@@ -69,7 +69,8 @@ jest.mock('@grafana/ui', () => ({
         {...InTestIds.field.apply()}
         style={{ height }}
         value={value}
-        onChange={(event) => onChange(event.currentTarget.value)}
+        onChange={(event) => onChange?.(event.currentTarget.value)}
+        onBlur={(event) => onBlur?.(event.currentTarget.value)}
       />
     );
   }),
@@ -121,6 +122,24 @@ describe('AutosizeCodeEditor', () => {
     expect(selectors.field()).toHaveStyle(`height: 360px`);
   });
 
+  it('Should not call onBlur if onBlur is not provided', () => {
+    const onBlur = jest.fn();
+    render(getComponent({}));
+
+    fireEvent.blur(selectors.field());
+    expect(onBlur).not.toHaveBeenCalled();
+  });
+
+  it('Should call onBlur if onBlur is provided', () => {
+    const onBlur = jest.fn();
+    render(getComponent({ onBlur, value: '1line\n' }));
+
+    fireEvent.blur(selectors.field());
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith('1line\\n');
+  });
+
   it('Should update height if props changed', () => {
     const { rerender } = render(getComponent({}));
 

diff --git a/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.tsx b/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.tsx
@@ -47,6 +47,7 @@ const getHeightByValue = (value: string, minHeight?: number, maxHeight?: number)
 export const AutosizeCodeEditor: React.FC<Props> = ({
   value,
   onChange,
+  onBlur,
   minHeight,
   maxHeight,
   height: staticHeight,
@@ -126,6 +127,29 @@ export const AutosizeCodeEditor: React.FC<Props> = ({
     [monacoEditor, onEditorDidMount]
   );
 
+  /**
+   * Change value
+   */
+  const onChangeValue = useCallback(
+    (value: string) => {
+      const currentValue = value.replaceAll('\n', '\\n');
+      onChange?.(currentValue);
+      setHeight(getHeightByValue(value, minHeight, maxHeight));
+    },
+    [maxHeight, minHeight, onChange]
+  );
+
+  /**
+   * onBlur handler
+   */
+  const onBlurUpdate = useCallback(
+    (value: string) => {
+      const currentValue = value.replaceAll('\n', '\\n');
+      onBlur?.(currentValue);
+    },
+    [onBlur]
+  );
+
   /**
    * Update Height on value change
    */
@@ -150,11 +174,8 @@ export const AutosizeCodeEditor: React.FC<Props> = ({
         height={staticHeight ?? height}
         monacoOptions={currentMonacoOptions}
         onEditorDidMount={onEditorDidMountMain}
-        onChange={(value) => {
-          const currentValue = value.replaceAll('\n', '\\n');
-          onChange?.(currentValue);
-          setHeight(getHeightByValue(value, minHeight, maxHeight));
-        }}
+        onChange={onChangeValue}
+        onBlur={onBlurUpdate}
         {...restProps}
       />
 
@@ -184,11 +205,8 @@ export const AutosizeCodeEditor: React.FC<Props> = ({
             containerStyles={styles.modalEditor}
             monacoOptions={currentMonacoOptions}
             onEditorDidMount={modalEditorDidMount}
-            onChange={(value) => {
-              const currentValue = value.replaceAll('\n', '\\n');
-              onChange?.(currentValue);
-              setHeight(getHeightByValue(value, minHeight, maxHeight));
-            }}
+            onChange={onChangeValue}
+            onBlur={onBlurUpdate}
             {...restProps}
           />
         </div>