handling blur event

Author: zamoore

packages/components/src/components/hds/code-editor/index.hbs

@@ -54,6 +54,7 @@
       ariaLabelledBy=this.ariaLabelledBy
       value=@value
       language=@language
+      onBlur=@onBlur
       onInput=this.onInput
       onSetup=this.onSetup
     }}

packages/components/src/components/hds/code-editor/index.ts

@@ -25,6 +25,7 @@ export interface HdsCodeEditorSignature {
     isStandalone?: boolean;
     language?: HdsCodeEditorModifierSignature['Args']['Named']['language'];
     value?: HdsCodeEditorModifierSignature['Args']['Named']['value'];
+    onBlur?: HdsCodeEditorModifierSignature['Args']['Named']['onBlur'];
     onInput?: HdsCodeEditorModifierSignature['Args']['Named']['onInput'];
     onSetup?: HdsCodeEditorModifierSignature['Args']['Named']['onSetup'];
   };

packages/components/src/modifiers/hds-code-editor.ts

@@ -22,6 +22,8 @@ import type {
 import type { Extension } from '@codemirror/state';
 import type { EditorView, ViewUpdate } from '@codemirror/view';
 
+type HdsCodeEditorBlurHandler = (editor: EditorView, event: FocusEvent) => void;
+
 export interface HdsCodeEditorSignature {
   Args: {
     Named: {
@@ -30,7 +32,7 @@ export interface HdsCodeEditorSignature {
       language?: HdsCodeEditorLanguages;
       value?: string;
       onInput?: (newVal: string) => void;
-      onBlur?: (editor: EditorView, event: FocusEvent) => void;
+      onBlur?: HdsCodeEditorBlurHandler;
       onSetup?: (editor: EditorView) => unknown;
     };
   };
@@ -81,8 +83,10 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
   editor!: EditorView;
   element!: HTMLElement;
 
+  onBlur: HdsCodeEditorSignature['Args']['Named']['onBlur'];
   onInput: HdsCodeEditorSignature['Args']['Named']['onInput'];
 
+  blurHandler!: (event: FocusEvent) => void;
   observer!: IntersectionObserver;
 
   constructor(
@@ -91,7 +95,13 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
   ) {
     super(owner, args);
 
-    registerDestructor(this, () => this.observer?.disconnect());
+    registerDestructor(this, () => {
+      this.observer?.disconnect();
+
+      if (this.onBlur !== undefined) {
+        this.element.removeEventListener('blur', this.blurHandler);
+      }
+    });
   }
 
   modify(
@@ -122,6 +132,21 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
     }
   }
 
+  private _setupEditorBlurHandler(
+    element: HTMLElement,
+    onBlur: HdsCodeEditorBlurHandler
+  ) {
+    const inputElement = element.querySelector('.cm-content');
+
+    if (inputElement === null) {
+      return;
+    }
+
+    this.blurHandler = (event: FocusEvent) => onBlur(this.editor, event);
+
+    (inputElement as HTMLElement).addEventListener('blur', this.blurHandler);
+  }
+
   private _setupEditorAriaAttributes(
     editor: EditorView,
     {
@@ -282,11 +307,20 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
       _positional: PositionalArgs<HdsCodeEditorSignature>,
       named: NamedArgs<HdsCodeEditorSignature>
     ) => {
-      const { onInput, onSetup, ariaLabel, ariaLabelledBy, language, value } =
-        named;
+      const {
+        onBlur,
+        onInput,
+        onSetup,
+        ariaLabel,
+        ariaLabelledBy,
+        language,
+        value,
+      } = named;
 
-      this.element = element;
       this.onInput = onInput;
+      this.onBlur = onBlur;
+
+      this.element = element;
 
       const editor = await this._createEditorTask.perform(element, {
         language,
@@ -299,6 +333,10 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
 
       this.editor = editor;
 
+      if (onBlur !== undefined) {
+        this._setupEditorBlurHandler(element, onBlur);
+      }
+
       this._setupEditorAriaAttributes(editor, { ariaLabel, ariaLabelledBy });
 
       onSetup?.(this.editor);

showcase/tests/integration/modifiers/hds-code-editor-test.js

@@ -1,6 +1,12 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, waitFor, setupOnerror } from '@ember/test-helpers';
+import {
+  render,
+  waitFor,
+  setupOnerror,
+  focus,
+  blur,
+} from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import sinon from 'sinon';
 
@@ -31,6 +37,22 @@ module('Integration | Modifier | hds-code-editor', function (hooks) {
     assert.dom('#code-editor-wrapper .cm-editor').includesText(val);
   });
 
+  // onBlur
+  test('it should call the onBlur action when the code editor loses focus', async function (assert) {
+    const blurSpy = sinon.spy();
+
+    this.set('handleBlur', blurSpy);
+
+    await setupCodeEditor(
+      hbs`<div id="code-editor-wrapper" {{hds-code-editor ariaLabel="test" onBlur=this.handleBlur}} />`
+    );
+
+    await focus('.cm-content');
+    await blur('.cm-content');
+
+    assert.ok(blurSpy.calledOnce);
+  });
+
   // onInput
   test('it should call the onInput action when the code editor value changes', async function (assert) {
     const inputSpy = sinon.spy();