Modal: fix issue with click outside to dismiss

.changeset/khaki-swans-type.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+`Modal` - Fixed issue where conditionally disabling ability to dismiss the `Modal` breaks click outside to dismiss.

packages/components/src/components/hds/modal/index.hbs

@@ -9,7 +9,7 @@
   {{did-insert this.didInsert}}
   {{will-destroy this.willDestroyNode}}
   {{! @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

packages/components/src/components/hds/modal/index.ts

@@ -9,8 +9,10 @@ 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 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 +63,15 @@ 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 => {
+      document.removeEventListener('click', this._clickHandler);
+    });
+  }
 
   get isDismissDisabled(): boolean {
     return this.args.isDismissDisabled ?? false;
@@ -128,6 +139,29 @@ 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();
+        }
+      }
     }
   }
 
@@ -151,6 +185,20 @@ export default class HdsModal extends Component<HdsModalSignature> {
     if (!this._element.open) {
       this.open();
     }
+
+    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
@@ -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();
-      }
-    }
   }
 }

showcase/tests/integration/components/hds/modal/index-test.js

@@ -169,6 +169,27 @@ module('Integration | Component | hds/modal/index', function (hooks) {
     assert.dom('#test-modal').isNotVisible();
   });
 
+  test('it should appropriately dismiss the modal when clicking outside the modal', async function (assert) {
+    this.set('isDismissDisabled', true);
+    await render(
+      hbs`<Hds::Modal @isDismissDisabled={{this.isDismissDisabled}} id="test-modal" as |M|>
+            <M.Header>Title</M.Header>
+            <M.Footer as |F|>
+              <Hds::Button id="cancel-button" type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
+            </M.Footer>
+          </Hds::Modal>`
+    );
+
+    await click('.hds-modal__overlay');
+    assert.dom('#test-modal').isVisible();
+
+    // now let's check that the state is reset and it can be closed
+    this.set('isDismissDisabled', false);
+    await rerender();
+    await click('.hds-modal__overlay');
+    assert.dom('#test-modal').isNotVisible();
+  });
+
   // ACCESSIBILITY
 
   test('it uses the title as name for the dialog', async function (assert) {