Feat: Add onFocusOut tests to PopoverPrimitive and related components

dchyun · dchyun · commit e334baa57361 · 2026-02-13T09:31:53.000-05:00
diff --git a/showcase/tests/integration/components/hds/dropdown/index-test.gts b/showcase/tests/integration/components/hds/dropdown/index-test.gts
@@ -7,6 +7,7 @@ import { module, test } from 'qunit';
 import { on } from '@ember/modifier';
 import { render, click, find } from '@ember/test-helpers';
 import style from 'ember-style-modifier';
+import { TrackedObject } from 'tracked-built-ins';
 
 import { HdsDropdown } from '@hashicorp/design-system-components/components';
 
@@ -329,4 +330,65 @@ module('Integration | Component | hds/dropdown/index', function (hooks) {
     assert.dom('#test-dropdown ul').hasAttribute('role', 'listbox');
     assert.dom('#test-dropdown ul').hasAttribute('aria-labelledby', buttonId);
   });
+
+  // CALLBACKS
+
+  test('it should invoke the `onClose` callback', async function (assert) {
+    let status;
+    const onClose = () => {
+      status = 'closed';
+    };
+
+    await render(
+      <template>
+        <HdsDropdown @onClose={{onClose}} id="test-dropdown" as |D|>
+          <D.ToggleButton @text="toggle button" id="test-toggle-button" />
+        </HdsDropdown>
+      </template>,
+    );
+    // toggle the visibility
+    await click('button#test-toggle-button');
+    // toggle it again
+    await click('button#test-toggle-button');
+    assert.strictEqual(status, 'closed');
+  });
+
+  test('it should invoke the `onFocusOut` callback', async function (assert) {
+    const context = new TrackedObject({
+      status: '',
+      showButton: true,
+    });
+
+    const onFocusOut = () => {
+      context.status = 'focus-out';
+    };
+
+    const onClickDemoButton = () => {
+      context.showButton = false;
+    };
+
+    await render(
+      <template>
+        <HdsDropdown @onFocusOut={{onFocusOut}} id="test-dropdown" as |D|>
+          <D.ToggleButton @text="toggle button" id="test-toggle-button" />
+          <D.Generic>
+            {{#if context.showButton}}
+              <button
+                type="button"
+                id="test-dropdown-demo-button"
+                {{on "click" onClickDemoButton}}
+              >
+                Hide me
+              </button>
+            {{/if}}
+          </D.Generic>
+        </HdsDropdown>
+      </template>,
+    );
+    // toggle the visibility
+    await click('button#test-toggle-button');
+    // click outside of the dropdown to trigger focus out
+    await click('#test-dropdown-demo-button');
+    assert.strictEqual(context.status, 'focus-out');
+  });
 });
diff --git a/showcase/tests/integration/components/hds/filter-bar/filters-dropdown-test.gts b/showcase/tests/integration/components/hds/filter-bar/filters-dropdown-test.gts
@@ -5,6 +5,7 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
+import { on } from '@ember/modifier';
 import { render, click } from '@ember/test-helpers';
 import { TrackedObject } from 'tracked-built-ins';
 
@@ -187,5 +188,55 @@ module(
       assert.ok(context.isClicked);
       assert.true(Object.keys(context.filters).length === 0);
     });
+
+    // CALLBACKS: ONFOCUSOUT
+
+    test('it should call the onFocusOut callback', async function (assert) {
+      const context = new TrackedObject({
+        status: '',
+        showButton: true,
+      });
+
+      const onFocusOut = () => {
+        context.status = 'focus-out';
+      };
+
+      const onClickDemoButton = () => {
+        context.showButton = false;
+      };
+
+      await render(
+        <template>
+          <HdsFilterBarFiltersDropdown
+            @filters={{EMPTY_FILTERS}}
+            @onFocusOut={{onFocusOut}}
+            id="test-filters-dropdown"
+            as |D|
+          >
+            <D.FilterGroup
+              @key="demo-generic"
+              @type="generic"
+              @text="Generic"
+              as |F|
+            >
+              <F.Generic>
+                {{#if context.showButton}}
+                  <button
+                    type="button"
+                    id="test-filters-dropdown-demo-button"
+                    {{on "click" onClickDemoButton}}
+                  >
+                    Hide me
+                  </button>
+                {{/if}}
+              </F.Generic>
+            </D.FilterGroup>
+          </HdsFilterBarFiltersDropdown>
+        </template>,
+      );
+      await click('.hds-dropdown-toggle-button');
+      await click('#test-filters-dropdown-demo-button');
+      assert.strictEqual(context.status, 'focus-out');
+    });
   },
 );
diff --git a/showcase/tests/integration/components/hds/popover-primitive/index-test.gts b/showcase/tests/integration/components/hds/popover-primitive/index-test.gts
@@ -13,6 +13,7 @@ import {
   settled,
   setupOnerror,
 } from '@ember/test-helpers';
+import { on } from '@ember/modifier';
 import { hash } from '@ember/helper';
 import { TrackedObject } from 'tracked-built-ins';
 
@@ -274,6 +275,121 @@ module(
       assert.strictEqual(context.status, 'closed');
     });
 
+    test('it should invoke the `onFocusOut` callback if focus is lost, and not close the popover', async function (assert) {
+      const context = new TrackedObject({
+        status: '',
+        showButton: true,
+      });
+
+      const onFocusOut = () => {
+        context.status = 'focus-out';
+      };
+
+      const onClickDemoButton = () => {
+        context.showButton = false;
+      };
+
+      await render(
+        <template>
+          <HdsPopoverPrimitive
+            @enableClickEvents={{true}}
+            @onFocusOut={{onFocusOut}}
+            as |PP|
+          >
+            <div {{PP.setupPrimitiveContainer}}>
+              <button
+                {{PP.setupPrimitiveToggle}}
+                id="test-popover-primitive-toggle"
+                type="button"
+              />
+              <div
+                {{PP.setupPrimitivePopover anchoredPositionOptions=(hash)}}
+                id="test-popover-primitive-content"
+              >
+                {{#if context.showButton}}
+                  <button
+                    type="button"
+                    id="test-popover-primitive-demo-button"
+                    {{on "click" onClickDemoButton}}
+                  >
+                    Hide me
+                  </button>
+                {{/if}}
+              </div>
+            </div>
+          </HdsPopoverPrimitive>
+        </template>,
+      );
+
+      await click('#test-popover-primitive-toggle');
+      assert.dom('#test-popover-primitive-content').isVisible();
+
+      // trigger the dynamic template change that will cause the popover content to lose focus
+      await click('#test-popover-primitive-demo-button');
+      assert.strictEqual(context.showButton, false);
+      assert.strictEqual(context.status, 'focus-out');
+      assert.dom('#test-popover-primitive-content').isVisible();
+    });
+
+    test('it should not invoke the `onFocusOut` callback if focus is moved outside of the popover to another element', async function (assert) {
+      const context = new TrackedObject({
+        status: '',
+        showButton: true,
+      });
+
+      const onFocusOut = () => {
+        context.status = 'focus-out';
+      };
+
+      const onClickDemoButton = () => {
+        context.showButton = false;
+      };
+
+      await render(
+        <template>
+          <HdsPopoverPrimitive
+            @enableClickEvents={{true}}
+            @onFocusOut={{onFocusOut}}
+            as |PP|
+          >
+            <div {{PP.setupPrimitiveContainer}}>
+              <button
+                {{PP.setupPrimitiveToggle}}
+                id="test-popover-primitive-toggle"
+                type="button"
+              />
+              <div
+                {{PP.setupPrimitivePopover anchoredPositionOptions=(hash)}}
+                id="test-popover-primitive-content"
+              >
+                <button
+                  type="button"
+                  id="test-popover-primitive-demo-button"
+                  {{on "click" onClickDemoButton}}
+                >
+                  Demo button
+                </button>
+              </div>
+            </div>
+          </HdsPopoverPrimitive>
+          <button type="button" id="test-popover-primitive-external-button">
+            External button
+          </button>
+        </template>,
+      );
+
+      await click('#test-popover-primitive-toggle');
+      assert.dom('#test-popover-primitive-content').isVisible();
+
+      // focus on the button inside the popover
+      await focus('#test-popover-primitive-demo-button');
+      // move focus to the button outside of the popover
+      await focus('#test-popover-primitive-external-button');
+      // the popover should be closed, and the `onFocusOut` callback should not be invoked
+      assert.dom('#test-popover-primitive-content').isNotVisible();
+      assert.strictEqual(context.status, '');
+    });
+
     // ANCHORED POSITION OPTIONS
 
     // notice: since these options are forwarded to the `hds-anchored-position` modifier and there are specific tests for it, we're not going to test them here
diff --git a/showcase/tests/integration/components/hds/rich-tooltip/index-test.gts b/showcase/tests/integration/components/hds/rich-tooltip/index-test.gts
@@ -12,6 +12,8 @@ import {
   render,
   resetOnerror,
 } from '@ember/test-helpers';
+import { on } from '@ember/modifier';
+import { TrackedObject } from 'tracked-built-ins';
 
 import { HdsRichTooltip } from '@hashicorp/design-system-components/components';
 
@@ -149,6 +151,53 @@ module('Integration | Component | hds/rich-tooltip/index', function (hooks) {
     assert.strictEqual(status, 'closed');
   });
 
+  test('it should invoke the `onFocusOut` callback if focus is lost, and not close the popover', async function (assert) {
+    const context = new TrackedObject({
+      status: '',
+      showButton: true,
+    });
+
+    const onFocusOut = () => {
+      context.status = 'focus-out';
+    };
+
+    const onClickDemoButton = () => {
+      context.showButton = false;
+    };
+
+    await render(
+      <template>
+        <HdsRichTooltip
+          @enableClickEvents={{true}}
+          @onFocusOut={{onFocusOut}}
+          as |RT|
+        >
+          <RT.Toggle />
+          <RT.Bubble>
+            {{#if context.showButton}}
+              <button
+                type="button"
+                id="test-rich-tooltip-demo-button"
+                {{on "click" onClickDemoButton}}
+              >
+                Hide me
+              </button>
+            {{/if}}
+          </RT.Bubble>
+        </HdsRichTooltip>
+      </template>,
+    );
+
+    await click('button.hds-rich-tooltip__toggle');
+    assert.dom('.hds-rich-tooltip__bubble').isVisible();
+
+    // trigger the dynamic template change that will cause the tooltip bubble content to lose focus
+    await click('#test-rich-tooltip-demo-button');
+    assert.strictEqual(context.showButton, false);
+    assert.strictEqual(context.status, 'focus-out');
+    assert.dom('.hds-rich-tooltip__bubble').isVisible();
+  });
+
   // ANCHORED POSITION OPTIONS
   // unfortunately there is no easy/reliable way to test them here
 
