Merge pull request #286 from josemarluedke/feat/prevent-focus-restore

feat: add option to prevent focus restore on overlay and popover when trigger is hover

packages/overlays/src/components/overlay.gts

@@ -165,6 +165,10 @@ interface OverlaySignature {
     disableFlexContent?: boolean;
     customContentModifier?: ModifierLike<{ Element: HTMLElement }>;
     class?: string;
+    /**
+     * @defaultValue false
+     */
+    preventFocusRestore?: boolean;
 
     /**
      * @defaultValue true
@@ -280,6 +284,7 @@ class Overlay extends Component<OverlaySignature> {
 
         // restore focus
         if (
+          !this.args.preventFocusRestore &&
           this.focusedElement &&
           (this.focusedElement as HTMLElement).tabIndex > -1 &&
           typeof (this.focusedElement as HTMLElement).focus !== 'undefined'

packages/overlays/src/components/popover.gts

@@ -83,6 +83,7 @@ class Popover extends Component<PopoverSignature> {
   menuId = guidFor(this);
   @tracked _isOpen = false;
   @tracked isClosing = false;
+  @tracked preventFocusRestore = false;
 
   get isOpen(): boolean {
     if (
@@ -136,6 +137,7 @@ class Popover extends Component<PopoverSignature> {
     (el: HTMLElement, [eventType]: [eventType?: 'click' | 'hover']) => {
       this.triggerEl = el as HTMLLIElement;
       if (eventType === 'hover') {
+        this.preventFocusRestore = true;
         el.addEventListener('mouseenter', this.open);
         el.addEventListener('mouseleave', this.close);
       } else {
@@ -192,6 +194,7 @@ class Popover extends Component<PopoverSignature> {
             isOpen=this.isOpen
             toggle=this.toggle
             internalDidClose=this.didClose
+            preventFocusRestore=this.preventFocusRestore
           )
         )
       }}
@@ -239,6 +242,11 @@ interface ContentArgs
    */
   id: string;
 
+  /**
+   * @internal
+   */
+  preventFocusRestore?: boolean;
+
   class?: string;
 
   /**
@@ -345,6 +353,7 @@ class Content extends Component<ContentSignature> {
       @closeOnEscapeKey={{@closeOnEscapeKey}}
       @backdropTransition={{@backdropTransition}}
       @class={{this.classNames}}
+      @preventFocusRestore={{@preventFocusRestore}}
       id={{@id}}
       ...attributes
     >

site/app/components/signature-data.ts

@@ -7075,6 +7075,15 @@ const data: ComponentDoc[] = [
         description: 'A function that will be called when opened',
         tags: {}
       },
+      {
+        identifier: 'preventFocusRestore',
+        type: { type: '<span class="hljs-built_in">boolean</span>' },
+        isRequired: false,
+        isInternal: false,
+        description: '',
+        tags: { defaultValue: { name: 'defaultValue', value: 'false' } },
+        defaultValue: '<span class="hljs-literal">false</span>'
+      },
       {
         identifier: 'renderInPlace',
         type: { type: '<span class="hljs-built_in">boolean</span>' },
@@ -7726,6 +7735,14 @@ const data: ComponentDoc[] = [
         description: 'A function that will be called when opened',
         tags: {}
       },
+      {
+        identifier: 'preventFocusRestore',
+        type: { type: '<span class="hljs-built_in">boolean</span>' },
+        isRequired: false,
+        isInternal: true,
+        description: '',
+        tags: { internal: { name: 'internal', value: '' } }
+      },
       {
         identifier: 'renderInPlace',
         type: { type: '<span class="hljs-built_in">boolean</span>' },
@@ -8139,6 +8156,54 @@ const data: ComponentDoc[] = [
     description: '',
     tags: {}
   },
+  {
+    package: 'utilities',
+    module: 'collapsible',
+    name: 'Collapsible',
+    fileName: 'packages/utilities/declarations/components/collapsible.d.ts',
+    Args: [
+      {
+        identifier: 'isOpen',
+        type: { type: '<span class="hljs-built_in">boolean</span>' },
+        isRequired: true,
+        isInternal: false,
+        description: 'If true, the content will be visible',
+        tags: {}
+      },
+      {
+        identifier: 'initialHeight',
+        type: { type: '<span class="hljs-built_in">string</span>' },
+        isRequired: false,
+        isInternal: false,
+        description:
+          "The height for the content in it's collapsed state.\nThe unit of the value should be included, eg. '10px'.",
+        tags: { defaultValue: { name: 'defaultValue', value: '0' } },
+        defaultValue: '<span class="hljs-number">0</span>'
+      }
+    ],
+    Blocks: [
+      {
+        identifier: 'default',
+        type: {
+          type: '<span class="hljs-built_in">Array</span>',
+          raw: '[]',
+          items: []
+        },
+        isRequired: true,
+        isInternal: false,
+        description: '',
+        tags: {}
+      }
+    ],
+    Element: {
+      identifier: 'Element',
+      type: { type: 'HTMLDivElement' },
+      description: '',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement'
+    },
+    description: '',
+    tags: {}
+  },
   {
     package: 'utilities',
     module: 'divider',

test-app/tests/integration/components/overlays/overlay-test.ts

@@ -29,6 +29,7 @@ module(
     });
 
     const template = hbs`
+    <button type="button" data-test-id="some-button">Button</button>
     <div id="my-destination"></div>
     <Overlay
       @isOpen={{this.isOpen}}
@@ -40,6 +41,7 @@ module(
       @transitionDuration={{this.transitionDuration}}
       @backdrop={{this.backdrop}}
       @disableTransitions={{this.disableTransitions}}
+      @preventFocusRestore={{this.preventFocusRestore}}
       @disableFocusTrap={{this.disableFocusTrap}}
       @closeOnOutsideClick={{this.closeOnOutsideClick}}
       @closeOnEscapeKey={{this.closeOnEscapeKey}}
@@ -209,5 +211,63 @@ module(
       this.set('isOpen', false);
       this.set('isOpen', true);
     });
+
+    test('it manages focusing in content and restoration when focusTrap is disabled', async function (assert) {
+      this.set('disableTransitions', true);
+      this.set('disableFocusTrap', true);
+      this.set('isOpen', false);
+
+      await render(template);
+
+      (find('[data-test-id="some-button"]') as HTMLButtonElement).focus();
+      this.set('isOpen', true);
+      await settled();
+      assert.dom('[data-test-id="overlay"]').exists();
+
+      assert
+        .dom(document.activeElement)
+        .hasAttribute(
+          'data-test-id',
+          'overlay',
+          'should have focused in the overlay'
+        );
+
+      this.set('isOpen', false);
+      await settled();
+      assert.dom('[data-test-id="overlay"]').doesNotExist();
+
+      assert
+        .dom(document.activeElement)
+        .hasAttribute(
+          'data-test-id',
+          'some-button',
+          'should have restored the focus'
+        );
+
+      // Test when preventFocusRestore is true
+      // *************************************
+
+      this.set('preventFocusRestore', true);
+      this.set('isOpen', true);
+      await settled();
+      assert
+        .dom(document.activeElement)
+        .hasAttribute(
+          'data-test-id',
+          'overlay',
+          'should have focused in the overlay'
+        );
+
+      this.set('isOpen', false);
+      await settled();
+      assert.dom('[data-test-id="overlay"]').doesNotExist();
+
+      assert
+        .dom(document.activeElement)
+        .doesNotHaveAttribute(
+          'data-test-id',
+          'should have not restored the focus'
+        );
+    });
   }
 );

test-app/tests/integration/components/overlays/popover-test.ts

@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { click, render } from '@ember/test-helpers';
+import { click, render, triggerEvent, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import { registerCustomStyles } from '@frontile/theme';
 import { tv } from 'tailwind-variants';
@@ -45,6 +45,58 @@ module(
 
       assert.dom('[data-test-id="content"]').exists();
       assert.dom('[data-test-id="content"]').containsText('Content here');
+      assert
+        .dom(document.activeElement)
+        .hasAttribute(
+          'data-test-id',
+          'content',
+          'should have focused in the content'
+        );
+    });
+
+    test('it works with trigger hover mode, prevents focus restore', async function (assert) {
+      await render(
+        hbs`
+          <div id="my-destination"></div>
+          <button type="button" data-test-id="focused-element">Button</button>
+          <Popover as |p|>
+            <button {{p.trigger "hover"}} {{p.anchor}} data-test-id="trigger">
+              Trigger
+            </button>
+
+            <p.Content
+              @destinationElementId="my-destination"
+              data-test-id="content"
+            >
+              Content here
+            </p.Content>
+          </Popover>`
+      );
+
+      (find('[data-test-id="focused-element"]') as HTMLButtonElement).focus();
+
+      assert.dom('[data-test-id="content"]').doesNotExist();
+      await triggerEvent('[data-test-id="trigger"]', 'mouseenter');
+
+      assert.dom('[data-test-id="content"]').exists();
+      assert.dom('[data-test-id="content"]').containsText('Content here');
+      assert
+        .dom(document.activeElement)
+        .hasAttribute(
+          'data-test-id',
+          'content',
+          'should have focused in the content'
+        );
+
+      await triggerEvent('[data-test-id="trigger"]', 'mouseleave');
+      assert.dom('[data-test-id="content"]').doesNotExist();
+
+      assert
+        .dom(document.activeElement)
+        .doesNotHaveAttribute(
+          'data-test-id',
+          'should have not restored the focus'
+        );
     });
 
     test('it renders accessibility attributes', async function (assert) {
@@ -138,6 +190,13 @@ module(
       await click('#my-destination');
       assert.dom('[data-test-id="content"]').doesNotExist();
       assert.equal(calledClosed, true, 'should called didClose argument');
+      assert
+        .dom(document.activeElement)
+        .hasAttribute(
+          'data-test-id',
+          'trigger',
+          'should have restored the focus to the triggeer'
+        );
     });
 
     test('controlled isOpen', async function (assert) {