fix(action-menu): dispatch scroll event (#4715)

* fix(action-menu): dispatch scroll event * fix(action-menu): added open attribute for vrt * fix(action-menu): updated golden image cache * fix(action-menu): updated golden image cache * fix(action-menu): added unit tests * fix(action-menu): updated golden image cache * fix(action-menu): updated golden image cache * fix(action-menu): updated golden image cache --------- Co-authored-by: Rajdeep Chandra <rajdeepchandra@Rajdeeps-MacBook-Pro-2.local> Co-authored-by: Rajdeep Chandra <rajdeepchandra@rajdeeps-mbp-2.macromedia.com>
adobe · Sep 4, 2024 · c76f3f5 · c76f3f5
1 parent 2784e4c
commit c76f3f5
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 1 deletion.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: 1521deb961cf2a328a743c69e0a28ce7d3ae6fb2
+        default: 77fc745068639c0f956c26f7635c7ff5643ea905
     wireit_cache_name:
         type: string
         default: wireit

diff --git a/packages/action-menu/stories/action-menu.stories.ts b/packages/action-menu/stories/action-menu.stories.ts
@@ -466,3 +466,27 @@ export const directive = (): TemplateResult => {
 directive.swc_vrt = {
     skip: true,
 };
+
+export const withScrollEvent = (): TemplateResult => {
+    function handleActionMenuScroll(): void {
+        console.log('attached action menu scroll listener');
+    }
+
+    function renderMenuItems(): TemplateResult[] {
+        return Array.from(
+            { length: 30 },
+            (_, i) => html`
+                <sp-menu-item style="width: 100%;">
+                    This is an Action Menu Item ${i + 1}
+                </sp-menu-item>
+            `
+        );
+    }
+
+    return html`
+        <sp-action-menu @scroll=${handleActionMenuScroll} open>
+            <span slot="label">This is an Action Menu</span>
+            ${renderMenuItems()}
+        </sp-action-menu>
+    `;
+};
diff --git a/packages/action-menu/test/index.ts b/packages/action-menu/test/index.ts
@@ -39,6 +39,7 @@ import { sendMouse } from '../../../test/plugins/browser.js';
 import type { TestablePicker } from '../../picker/test/index.js';
 import type { Overlay } from '@spectrum-web-components/overlay';
 import { sendKeys } from '@web/test-runner-commands';
+import { TemplateResult } from '@spectrum-web-components/base';
 
 ignoreResizeObserverLoopError(before, after);
 
@@ -687,5 +688,36 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
             await aTimeout(50);
             expect(el.open).to.be.false;
         });
+        it('should handle scroll event', async () => {
+            const renderMenuItems = (): TemplateResult[] =>
+                Array.from(
+                    { length: 30 },
+                    (_, i) => html`
+                        <sp-menu-item style="width: 100%;">
+                            Menu Item ${i + 1}
+                        </sp-menu-item>
+                    `
+                );
+            const handleActionMenuScroll = spy();
+            const el = await fixture<ActionMenu>(html`
+                <sp-action-menu @scroll=${() => handleActionMenuScroll()}>
+                    <span slot="label">More Actions</span>
+                    <sp-menu-item>Deselect</sp-menu-item>
+                    <sp-menu-item>Select Inverse</sp-menu-item>
+                    <sp-menu-item>Feather...</sp-menu-item>
+                    <sp-menu-item>Select and Mask...</sp-menu-item>
+                    ${renderMenuItems()}
+                </sp-action-menu>
+            `);
+
+            await elementUpdated(el);
+
+            expect(handleActionMenuScroll.called).to.be.false;
+
+            el.dispatchEvent(
+                new Event('scroll', { cancelable: true, composed: true })
+            );
+            expect(handleActionMenuScroll).to.have.been.called;
+        });
     });
 };
diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts
@@ -650,6 +650,15 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
 
     protected hasRenderedOverlay = false;
 
+    private onScroll(): void {
+        this.dispatchEvent(
+            new Event('scroll', {
+                cancelable: true,
+                composed: true,
+            })
+        );
+    }
+
     protected get renderMenu(): TemplateResult {
         const menu = html`
             <sp-menu
@@ -660,6 +669,7 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
                     handleEvent: this.handleEnterKeydown,
                     capture: true,
                 }}
+                @scroll=${this.onScroll}
                 role=${this.listRole}
                 .selects=${this.selects}
                 .selected=${this.value ? [this.value] : []}