fix: prevent "hover" overlays from receiving focus

adobe · May 26, 2022 · 7bd5ac2 · 7bd5ac2
1 parent 9d07e38
commit 7bd5ac2
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 12 deletions.
diff --git a/packages/overlay/src/OverlayTrigger.ts b/packages/overlay/src/OverlayTrigger.ts
@@ -257,7 +257,9 @@ export class OverlayTrigger extends SpectrumElement {
             offset: this.offset,
             placement: this.placement,
             receivesFocus:
-                this.type && this.type !== 'inline' ? 'auto' : undefined,
+                !this.type || this.type === 'inline' || this.open === 'hover'
+                    ? undefined
+                    : 'auto',
         };
     }
 

diff --git a/packages/overlay/stories/overlay.stories.ts b/packages/overlay/stories/overlay.stories.ts
@@ -16,6 +16,7 @@ import {
     OverlayContentTypes,
     OverlayTrigger,
     Placement,
+    TriggerInteractions,
     VirtualTrigger,
 } from '../';
 import '@spectrum-web-components/action-button/sp-action-button.js';
@@ -109,6 +110,12 @@ export default {
                 ],
             },
         },
+        type: {
+            control: {
+                type: 'inline-radio',
+                options: ['modal', 'replace', 'inline'],
+            },
+        },
         colorStop: {
             control: {
                 type: 'inline-radio',
@@ -127,16 +134,23 @@ interface Properties {
     placement: Placement;
     offset: number;
     open?: OverlayContentTypes;
+    type?: Extract<TriggerInteractions, 'inline' | 'modal' | 'replace'>;
 }
 
-const template = ({ placement, offset, open }: Properties): TemplateResult => {
+const template = ({
+    placement,
+    offset,
+    open,
+    type,
+}: Properties): TemplateResult => {
     return html`
         ${storyStyles}
         <overlay-trigger
             id="trigger"
             placement="${placement}"
             offset="${offset}"
             open=${ifDefined(open)}
+            type=${ifDefined(type)}
         >
             <sp-button variant="primary" slot="trigger">Show Popover</sp-button>
             <sp-popover

diff --git a/packages/overlay/test/overlay-trigger-hover.test.ts b/packages/overlay/test/overlay-trigger-hover.test.ts
@@ -10,10 +10,12 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import {
+    aTimeout,
     elementUpdated,
     expect,
     fixture,
     html,
+    oneEvent,
     waitUntil,
 } from '@open-wc/testing';
 import '@spectrum-web-components/popover/sp-popover.js';
@@ -143,21 +145,18 @@ describe('Overlay Trigger - Hover', () => {
         expect(el.open).to.be.undefined;
 
         const trigger = el.querySelector('[slot="trigger"]') as ActionButton;
-        trigger.dispatchEvent(
-            new Event('mouseenter', {
-                bubbles: true,
-            })
-        );
+        const opened = oneEvent(el, 'sp-opened');
+        trigger.focus();
+        await opened;
 
         await elementUpdated(el);
+        await aTimeout(500);
 
         expect(el.open).to.equal('hover');
 
-        trigger.dispatchEvent(
-            new Event('mouseleave', {
-                bubbles: true,
-            })
-        );
+        const closed = oneEvent(el, 'sp-closed');
+        trigger.blur();
+        await closed;
 
         await elementUpdated(el);