feat: improve logic for modal/flyout lifecycle handling

shleewhite · shleewhite · commit 169a099db14c · 2025-09-19T16:04:17.000-04:00
diff --git a/packages/components/src/components/hds/flyout/index.hbs b/packages/components/src/components/hds/flyout/index.hbs
@@ -6,10 +6,9 @@
   class={{this.classNames}}
   ...attributes
   aria-labelledby={{this.id}}
-  {{did-insert this.didInsert}}
-  {{will-destroy this.willDestroyNode}}
+  {{this._registerDialog}}
   {{! @glint-expect-error - https://github.com/josemarluedke/ember-focus-trap/issues/86 }}
-  {{focus-trap isActive=this._isOpen focusTrapOptions=(hash onDeactivate=this.onDismiss clickOutsideDeactivates=true)}}
+  {{focus-trap isActive=this._isOpen focusTrapOptions=(hash onDeactivate=this.onDismiss)}}
 >
   <:header>
     {{yield
diff --git a/packages/components/src/components/hds/flyout/index.ts b/packages/components/src/components/hds/flyout/index.ts
@@ -10,6 +10,9 @@ import { assert } from '@ember/debug';
 import { getElementId } from '../../../utils/hds-get-element-id.ts';
 import { buildWaiter } from '@ember/test-waiters';
 import type { WithBoundArgs } from '@glint/template';
+import { modifier } from 'ember-modifier';
+import { registerDestructor } from '@ember/destroyable';
+import type Owner from '@ember/owner';
 
 import type { HdsFlyoutSizes } from './types.ts';
 
@@ -64,6 +67,27 @@ export default class HdsFlyout extends Component<HdsFlyoutSignature> {
   _element!: HTMLDialogElement;
   private _body!: HTMLElement;
   private _bodyInitialOverflowValue = '';
+  private _clickHandler!: (event: MouseEvent) => void;
+
+  constructor(owner: Owner, args: HdsFlyoutSignature['Args']) {
+    super(owner, args);
+
+    registerDestructor(this, (): void => {
+      // if the <dialog> is removed from the dom while open we emulate the close event
+      if (this._element && this._isOpen) {
+        this._element.dispatchEvent(new Event('close'));
+
+        this._element.removeEventListener(
+          'close',
+          // eslint-disable-next-line @typescript-eslint/unbound-method
+          this.registerOnCloseCallback,
+          true
+        );
+      }
+
+      document.removeEventListener('click', this._clickHandler, true);
+    });
+  }
 
   /**
    * Sets the size of the flyout
@@ -115,8 +139,7 @@ export default class HdsFlyout extends Component<HdsFlyoutSignature> {
     this._isOpen = false;
   }
 
-  @action
-  didInsert(element: HTMLDialogElement): void {
+  private _registerDialog = modifier((element: HTMLDialogElement) => {
     // Store references of `<dialog>` and `<body>` elements
     this._element = element;
     this._body = document.body;
@@ -135,7 +158,19 @@ export default class HdsFlyout extends Component<HdsFlyoutSignature> {
     if (!this._element.open) {
       this.open();
     }
-  }
+
+    this._clickHandler = (event: MouseEvent) => {
+      // check if the click is outside the flyout and the flyout is open
+      if (!this._element.contains(event.target as Node) && this._isOpen) {
+        void this.onDismiss();
+      }
+    };
+
+    document.addEventListener('click', this._clickHandler, {
+      capture: true,
+      passive: false,
+    });
+  });
 
   @action
   willDestroyNode(): void {
diff --git a/packages/components/src/components/hds/modal/index.hbs b/packages/components/src/components/hds/modal/index.hbs
@@ -6,10 +6,9 @@
   class={{this.classNames}}
   ...attributes
   aria-labelledby={{this.id}}
-  {{did-insert this.didInsert}}
-  {{will-destroy this.willDestroyNode}}
+  {{this._registerDialog}}
   {{! @glint-expect-error - https://github.com/josemarluedke/ember-focus-trap/issues/86 }}
-  {{focus-trap isActive=this._isOpen focusTrapOptions=(hash onDeactivate=this.onDismiss clickOutsideDeactivates=true)}}
+  {{focus-trap isActive=this._isOpen focusTrapOptions=(hash onDeactivate=this.onDismiss)}}
 >
   <:header>
     {{yield
diff --git a/packages/components/src/components/hds/modal/index.ts b/packages/components/src/components/hds/modal/index.ts
@@ -9,8 +9,11 @@ import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 import { getElementId } from '../../../utils/hds-get-element-id.ts';
 import { buildWaiter } from '@ember/test-waiters';
+import { registerDestructor } from '@ember/destroyable';
+import { modifier } from 'ember-modifier';
 
 import type { WithBoundArgs } from '@glint/template';
+import type Owner from '@ember/owner';
 import type { HdsModalSizes, HdsModalColors } from './types.ts';
 
 import HdsDialogPrimitiveHeaderComponent from '../dialog-primitive/header.ts';
@@ -61,6 +64,27 @@ export default class HdsModal extends Component<HdsModalSignature> {
   private _element!: HTMLDialogElement;
   private _body!: HTMLElement;
   private _bodyInitialOverflowValue = '';
+  private _clickHandler!: (event: MouseEvent) => void;
+
+  constructor(owner: Owner, args: HdsModalSignature['Args']) {
+    super(owner, args);
+
+    registerDestructor(this, (): void => {
+      // if the <dialog> is removed from the dom while open we emulate the close event
+      if (this._element && this._isOpen) {
+        this._element.dispatchEvent(new Event('close'));
+
+        this._element.removeEventListener(
+          'close',
+          // eslint-disable-next-line @typescript-eslint/unbound-method
+          this.registerOnCloseCallback,
+          true
+        );
+      }
+
+      document.removeEventListener('click', this._clickHandler, true);
+    });
+  }
 
   get isDismissDisabled(): boolean {
     return this.args.isDismissDisabled ?? false;
@@ -128,11 +152,33 @@ export default class HdsModal extends Component<HdsModalSignature> {
       }
     } else {
       this._isOpen = false;
+
+      // Reset page `overflow` property
+      if (this._body) {
+        this._body.style.removeProperty('overflow');
+        if (this._bodyInitialOverflowValue === '') {
+          if (this._body.style.length === 0) {
+            this._body.removeAttribute('style');
+          }
+        } else {
+          this._body.style.setProperty(
+            'overflow',
+            this._bodyInitialOverflowValue
+          );
+        }
+      }
+
+      // Return focus to a specific element (if provided)
+      if (this.args.returnFocusTo) {
+        const initiator = document.getElementById(this.args.returnFocusTo);
+        if (initiator) {
+          initiator.focus();
+        }
+      }
     }
   }
 
-  @action
-  didInsert(element: HTMLDialogElement): void {
+  private _registerDialog = modifier((element: HTMLDialogElement) => {
     // Store references of `<dialog>` and `<body>` elements
     this._element = element;
     this._body = document.body;
@@ -151,19 +197,21 @@ export default class HdsModal extends Component<HdsModalSignature> {
     if (!this._element.open) {
       this.open();
     }
-  }
 
-  @action
-  willDestroyNode(): void {
-    if (this._element) {
-      this._element.removeEventListener(
-        'close',
-        // eslint-disable-next-line @typescript-eslint/unbound-method
-        this.registerOnCloseCallback,
-        true
-      );
-    }
-  }
+    this._clickHandler = (event: MouseEvent) => {
+      // check if the click is outside the modal and the modal is open
+      if (!this._element.contains(event.target as Node) && this._isOpen) {
+        if (!this.isDismissDisabled) {
+          void this.onDismiss();
+        }
+      }
+    };
+
+    document.addEventListener('click', this._clickHandler, {
+      capture: true,
+      passive: false,
+    });
+  });
 
   @action
   open(): void {
@@ -185,7 +233,6 @@ export default class HdsModal extends Component<HdsModalSignature> {
   async onDismiss(): Promise<void> {
     // allow ember test helpers to be aware of when the `close` event fires
     // when using `click` or other helpers from '@ember/test-helpers'
-    // Notice: this code will get stripped out in production builds (DEBUG evaluates to `true` in dev/test builds, but `false` in prod builds)
     if (this._element.open) {
       const token = waiter.beginAsync();
       const listener = () => {
@@ -197,28 +244,5 @@ export default class HdsModal extends Component<HdsModalSignature> {
 
     // Make modal dialog invisible using the native `close` method
     this._element.close();
-
-    // Reset page `overflow` property
-    if (this._body) {
-      this._body.style.removeProperty('overflow');
-      if (this._bodyInitialOverflowValue === '') {
-        if (this._body.style.length === 0) {
-          this._body.removeAttribute('style');
-        }
-      } else {
-        this._body.style.setProperty(
-          'overflow',
-          this._bodyInitialOverflowValue
-        );
-      }
-    }
-
-    // Return focus to a specific element (if provided)
-    if (this.args.returnFocusTo) {
-      const initiator = document.getElementById(this.args.returnFocusTo);
-      if (initiator) {
-        initiator.focus();
-      }
-    }
   }
 }
