fix(overlay): overlay scroll in safari and firefox (#4969)

Reverts the removal of `display: flex` from overlay that caused content to overflow and not scroll
adobe · Dec 5, 2024 · 05d24ff · 05d24ff
1 parent ef08e91
commit 05d24ff
Show file tree

Hide file tree

Showing 5 changed files with 722 additions and 67 deletions.
diff --git a/packages/combobox/test/combobox.test.ts b/packages/combobox/test/combobox.test.ts
@@ -23,10 +23,15 @@ import {
     fixture,
     homeEvent,
 } from '../../../test/testing-helpers.js';
-import { executeServerCommand, sendKeys } from '@web/test-runner-commands';
+import {
+    executeServerCommand,
+    sendKeys,
+    setViewport,
+} from '@web/test-runner-commands';
 import { PickerButton } from '@spectrum-web-components/picker-button';
 import {
     comboboxFixture,
+    longComboboxFixture,
     TestableCombobox,
     testActiveElement,
 } from './helpers.js';
@@ -367,7 +372,7 @@ describe('Combobox', () => {
             expect(el.shadowRoot.activeElement).to.equal(input);
         });
     });
-    describe('manage active decendent', () => {
+    describe('manage active descendent', () => {
         it('sets activeDescendant to first descendent on ArrowDown', async () => {
             const el = await comboboxFixture();
 
@@ -621,7 +626,7 @@ describe('Combobox', () => {
                     ?.querySelector('[selected]')?.textContent
             ).to.equal(item.textContent);
         });
-        it('sets the value when an item is clicked programatically', async () => {
+        it('sets the value when an item is clicked programmatically', async () => {
             const el = await comboboxFixture();
 
             await elementUpdated(el);
@@ -955,4 +960,27 @@ describe('Combobox', () => {
         expect(tooltipEl.open).to.be.false;
         expect(el.open).to.be.false;
     });
+
+    it('scrolls to fit window', async () => {
+        await setViewport({ width: 360, height: 640 });
+        const el = await longComboboxFixture();
+
+        await elementUpdated(el);
+
+        expect(el.value).to.equal('');
+        expect(el.activeDescendant).to.be.undefined;
+        expect(el.open).to.be.false;
+
+        const opened = oneEvent(el, 'sp-opened');
+        el.focusElement.click();
+        await opened;
+        expect(el.open).to.be.true;
+
+        const menu = el.shadowRoot.querySelector(
+            '[role="listbox"]'
+        ) as HTMLElement;
+        await elementUpdated(menu);
+
+        expect(menu.scrollHeight > window.innerHeight).to.be.true;
+    });
 });
diff --git a/packages/combobox/test/helpers.ts b/packages/combobox/test/helpers.ts
@@ -15,7 +15,7 @@ import { html } from '@open-wc/testing';
 import { ComboboxOption } from '@spectrum-web-components/combobox';
 import '@spectrum-web-components/combobox/sp-combobox.js';
 import { MenuItem } from '@spectrum-web-components/menu';
-import { fruits } from '../stories/index.js';
+import { countries, fruits } from '../stories/index.js';
 
 export type TestableCombobox = HTMLElement & {
     activeDescendant: ComboboxOption;
@@ -51,6 +51,19 @@ export const comboboxFixture = async (): Promise<TestableCombobox> => {
 
     return el;
 };
+export const longComboboxFixture = async (): Promise<TestableCombobox> => {
+    const el = await fixture<TestableCombobox>(html`
+        <sp-combobox
+            .autocomplete=${'list'}
+            label="Combobox"
+            .options=${countries}
+        >
+            Combobox
+        </sp-combobox>
+    `);
+
+    return el;
+};
 
 export const testActiveElement = (
     el: TestableCombobox,