fix(menu): allow change events to be direct (#3689)

packages/action-menu/stories/action-menu.stories.ts

@@ -23,6 +23,7 @@ import { makeOverBackground } from '../../button/stories/index.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js';
 import type { MenuItem } from '@spectrum-web-components/menu/src/MenuItem.js';
 import { Placement } from '@spectrum-web-components/overlay/src/overlay-types.js';
+import { Menu } from '@spectrum-web-components/menu';
 
 export default {
     component: 'sp-action-menu',
@@ -191,7 +192,10 @@ export const labelOnly = ({
         ?disabled=${disabled}
         ?open=${open}
         size=${size}
-        @change="${changeHandler}"
+        @change=${(event: Event & { target: Menu }): void => {
+            navigator.clipboard.writeText(event.target.value);
+            changeHandler(event);
+        }}
         .selects=${selects ? selects : undefined}
         value=${selected ? 'Select Inverse' : ''}
     >

packages/menu/src/Menu.ts

@@ -528,7 +528,6 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
             this.selectedItems = [targetItem];
         }
 
-        await this.updateComplete;
         const applyDefault = this.dispatchEvent(
             new Event('change', {
                 cancelable: true,

packages/menu/stories/menu.stories.ts

@@ -58,7 +58,14 @@ export const Default = (): TemplateResult => {
 
 export const singleSelect = (): TemplateResult => {
     return html`
-        <sp-menu selects="single">
+        <sp-menu
+            selects="single"
+            @change=${({
+                target: { value },
+            }: Event & { target: Menu }): void => {
+                navigator.clipboard.writeText(value);
+            }}
+        >
             <sp-menu-item selected>Deselect</sp-menu-item>
             <sp-menu-item>Select Inverse</sp-menu-item>
             <sp-menu-item>Feather...</sp-menu-item>
@@ -69,7 +76,14 @@ export const singleSelect = (): TemplateResult => {
         </sp-menu>
 
         <sp-popover open>
-            <sp-menu selects="single">
+            <sp-menu
+                selects="single"
+                @change=${({
+                    target: { value },
+                }: Event & { target: Menu }): void => {
+                    navigator.clipboard.writeText(value);
+                }}
+            >
                 <sp-menu-item>Deselect</sp-menu-item>
                 <sp-menu-item>Select Inverse</sp-menu-item>
                 <sp-menu-item selected>Feather...</sp-menu-item>

packages/menu/test/menu.test.ts

@@ -31,6 +31,7 @@ import {
 } from '../../../test/testing-helpers.js';
 import { spy } from 'sinon';
 import { sendKeys } from '@web/test-runner-commands';
+import { isWebKit } from '@spectrum-web-components/shared';
 
 describe('Menu', () => {
     it('renders empty', async () => {
@@ -166,6 +167,38 @@ describe('Menu', () => {
         await expect(el).to.be.accessible();
     });
 
+    it('has a "value" that can be copied during "change" events', async function () {
+        if (isWebKit()) {
+            this.skip();
+        }
+        const el = await fixture<Menu>(
+            html`
+                <sp-menu
+                    selects="single"
+                    @change=${({
+                        target: { value },
+                    }: Event & { target: Menu }): void => {
+                        navigator.clipboard.writeText(value);
+                    }}
+                >
+                    <sp-menu-item>Not Selected</sp-menu-item>
+                    <sp-menu-item selected>Selected</sp-menu-item>
+                    <sp-menu-item id="other">Other</sp-menu-item>
+                </sp-menu>
+            `
+        );
+
+        await elementUpdated(el);
+
+        const otherItem = el.querySelector('#other') as MenuItem;
+        otherItem.click();
+
+        await elementUpdated(el);
+
+        const clipboardText = await navigator.clipboard.readText();
+        expect(clipboardText).to.equal('Other');
+    });
+
     it('renders w/ hrefs', async () => {
         const el = await fixture<Menu>(
             html`

test/plugins/browser.ts

@@ -64,3 +64,11 @@ export function sendMouse(options: { steps: Step[] }) {
     queueMouseCleanUp();
     return executeServerCommand('send-pointer', options);
 }
+
+/**
+ * Call to the browser with instructions for interacting with the pointing
+ * device while queueing cleanup of those commands after the test is run.
+ */
+export function grantPermissions(options: string[]) {
+    return executeServerCommand('grant-permissions', options);
+}

test/plugins/grant-permissions-plugin.ts

@@ -0,0 +1,47 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import type { BrowserContext, Page } from 'playwright';
+
+export function grantPermissionsPlugin() {
+    return {
+        name: 'grant-permissions-command',
+        async executeCommand({
+            command,
+            session,
+            payload,
+        }: {
+            payload: string[];
+            command: string;
+            session: {
+                id: string;
+                browser: {
+                    type: string;
+                    getPage: (id: string) => Page;
+                    context(): BrowserContext;
+                };
+            };
+        }): Promise<any> {
+            if (command === 'grant-permissions') {
+                // handle specific behavior for playwright
+                if (session.browser.type === 'playwright') {
+                    const page = session.browser.getPage(session.id);
+                    await page.context().grantPermissions(payload);
+                    return true;
+                }
+                // you might not be able to support all browser launchers
+                throw new Error(
+                    `Sending mouse commands is not supported for browser type ${session.browser.type}.`
+                );
+            }
+        },
+    };
+}

web-test-runner.config.js

@@ -26,6 +26,7 @@ import {
 import { fromRollup } from '@web/dev-server-rollup';
 import rollupJson from '@rollup/plugin-json';
 import rollupCommonjs from '@rollup/plugin-commonjs';
+import { grantPermissionsPlugin } from './test/plugins/grant-permissions-plugin.js';
 
 const commonjs = fromRollup(rollupCommonjs);
 const json = fromRollup(rollupJson);
@@ -38,6 +39,7 @@ export default {
         }),
         sendKeysPlugin(),
         sendMousePlugin(),
+        grantPermissionsPlugin(),
         a11ySnapshotPlugin(),
         configuredVisualRegressionPlugin(),
         json({}),

web-test-runner.utils.js

@@ -20,6 +20,7 @@ export const chromium = playwrightLauncher({
     createBrowserContext: ({ browser }) =>
         browser.newContext({
             ignoreHTTPSErrors: true,
+            permissions: ['clipboard-read', 'clipboard-write'],
         }),
 });
 
@@ -31,6 +32,7 @@ export const chromiumWithFlags = playwrightLauncher({
     createBrowserContext: ({ browser }) =>
         browser.newContext({
             ignoreHTTPSErrors: true,
+            permissions: ['clipboard-read', 'clipboard-write'],
         }),
 });
 
@@ -50,6 +52,8 @@ export const firefox = playwrightLauncher({
             'dom.min_background_timeout_value': 10,
             'extensions.autoDisableScopes': 0,
             'extensions.enabledScopes': 15,
+            'dom.events.asyncClipboard.readText': true,
+            'dom.events.testing.asyncClipboard': true,
         },
     },
 });