Merge branch 'main' into CSS-Cutoff

Author: caseyisonit

.changeset/happy-cycles-check.md

@@ -0,0 +1,5 @@
+---
+'@spectrum-web-components/overlay': major
+---
+
+**Fixed** : Overlays (like pickers and action menus) were incorrectly closing when scrolling occurred within components. The fix ensures the `handleScroll` method in `OverlayStack` only responds to document/body scrolling events and ignores component-level scrolling events, which was the original intention.

packages/overlay/src/OverlayStack.ts

@@ -40,6 +40,15 @@ class OverlayStack {
     }
 
     private handleScroll = (event: Event): void => {
+        // Only handle document/body level scrolls
+        // Skip any component scrolls
+        if (
+            event.target !== document &&
+            event.target !== document.documentElement &&
+            event.target !== document.body
+        ) {
+            return;
+        }
         // Update positions of all open overlays
         this.stack.forEach((overlay) => {
             if (overlay.open) {

packages/picker/test/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 /*
 Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -12,6 +13,7 @@ governing permissions and limitations under the License.
 
 import type { Picker } from '@spectrum-web-components/picker';
 
+// eslint-disable-next-line import/no-extraneous-dependencies
 import {
     aTimeout,
     elementUpdated,
@@ -1513,6 +1515,76 @@ export function runPickerTests(): void {
                 'Waiting for picker to remain open after scroll'
             );
 
+            expect(picker.open).to.be.true;
+        });
+        it('ignores component scrolling but handles document scrolling', async () => {
+            const scrollSpy = spy(document, 'dispatchEvent');
+
+            const el = await fixture(html`
+                <div style="height: 200vh; padding: 50vh 0;">
+                    <div
+                        id="scrollable-container"
+                        style="height: 100px; overflow-y: auto;"
+                    >
+                        <div style="height: 200px;">Scrollable content</div>
+                    </div>
+                    <sp-picker label="Select an option" placement="right">
+                        <sp-menu-item value="option-1">Option 1</sp-menu-item>
+                        <sp-menu-item value="option-2">Option 2</sp-menu-item>
+                        <sp-menu-item value="option-3">Option 3</sp-menu-item>
+                    </sp-picker>
+                </div>
+            `);
+
+            const picker = el.querySelector('sp-picker') as Picker;
+            const scrollableContainer = el.querySelector(
+                '#scrollable-container'
+            ) as HTMLElement;
+
+            await elementUpdated(picker);
+
+            const opened = oneEvent(picker, 'sp-opened');
+            picker.click();
+            await opened;
+
+            expect(picker.open).to.be.true;
+
+            scrollSpy.resetHistory();
+
+            scrollableContainer.scrollTop = 50;
+
+            await aTimeout(50);
+
+            const componentScrollUpdateCount = scrollSpy
+                .getCalls()
+                .filter(
+                    (call) =>
+                        call.args[0] instanceof CustomEvent &&
+                        call.args[0].type === 'sp-update-overlays'
+                ).length;
+
+            scrollSpy.resetHistory();
+
+            if (document.scrollingElement) {
+                document.scrollingElement.scrollTop = 100;
+            }
+
+            await aTimeout(50);
+
+            const documentScrollUpdateCount = scrollSpy
+                .getCalls()
+                .filter(
+                    (call) =>
+                        call.args[0] instanceof CustomEvent &&
+                        call.args[0].type === 'sp-update-overlays'
+                ).length;
+
+            scrollSpy.restore();
+
+            expect(componentScrollUpdateCount).to.equal(0);
+
+            expect(documentScrollUpdateCount).to.be.greaterThan(0);
+
             expect(picker.open).to.be.true;
         });
     });