[Bug]: Multiple change events dispatched from ActionMenu tray in mobile device

[godanny86]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

ActionMenu, Tray

Expected behavior

When using a mobile device the ActionMenu opens in a tray. When a user selects a menu item in the tray a single change event should be dispatched that reflects the selection.

Actual behavior

When using a mobile device the ActionMenu opens in a tray. When a user selects a menu item in the tray we are observing multiple change events being dispatched. The multiple change events is intermittent. The following sandbox: https://studio.webcomponents.dev/edit/JciavEjTy2VT17fMD1Rp/src/index.ts?p=stories can reliably reproduce the behavior on iOS touch devices and simulator. The behavior is not reproduced using a simple browser emulator.

Screenshots

Screen.Recording.2024-05-15.at.8.54.42.AM.mov

What browsers are you seeing the problem in?

Safari

How can we reproduce this issue?

1. Use an iOS simulator or real device (v17.2, v17.4)
2. Navigate to the following playground: https://studio.webcomponents.dev/edit/JciavEjTy2VT17fMD1Rp/src/index.ts?p=stories
3. Click the actionMenu button to open the tray
4. Make a selection in the tray
5. Check the console. Expected that each selection corresponds to a console statement about the change
6. Observe that often an extra change event is dispatched following a selection from the tray
7. Also observing that sometimes the user selection does not "stick" following a selection.

Sample code that illustrates the problem

// Action Menu playground

import { LitElement, html, TemplateResult } from "lit";
import { customElement, state } from 'lit/decorators.js';
import type { ActionMenu } from '@spectrum-web-components/action-menu';
import "@spectrum-web-components/action-menu/sp-action-menu.js";
import "@spectrum-web-components/menu/sp-menu.js";
import "@spectrum-web-components/menu/sp-menu-item.js";
import "@spectrum-web-components/menu/sp-menu-divider.js";
import "@spectrum-web-components/menu/sp-menu-group.js";

@customElement("my-counter")
export default class MyCounter extends LitElement {
  @state()
  protected _num = 0;

  protected render(): TemplateResult {
    return html`
      <sp-action-menu
            @change=${({ target: { value } }: Event & { target: ActionMenu }) => {
              this._num++;
              console.log(`Change: ${this._num} ${value}`);
            }}
            label="Filter or Sort"
        >
            <sp-menu-group selects="single">
                <span slot="header">Sort By</span>
                <sp-menu-item>Name</sp-menu-item>
                <sp-menu-item>Created</sp-menu-item>
                <sp-menu-item>Modified</sp-menu-item>
            </sp-menu-group>
            <sp-menu-divider></sp-menu-divider>
            <sp-menu-group selects="multiple">
                <sp-menu-item>Reverse Order</sp-menu-item>
            </sp-menu-group>
        </sp-action-menu>
      
    `;
  }
}

Logs taken while reproducing problem

No response

[Rajdeepc]

Can we tag this to iOS or do you see this is happening in Android also?

[godanny86]

@Rajdeepc I see the double change event issue in Android with Samsung devices. With the Samsung device it may be conflated with this issue: #4460 where the ActionMenu does not pop into a tray. For other Android devices like Google Pixel I don't see the double change event and the ActionMenu opens in a tray as expected.

Samsung Galaxy (reproduces the issue):

Screen.Recording.2024-05-21.at.10.30.21.AM.mov

Google Pixel (working as expected):

Screen.Recording.2024-05-21.at.10.29.06.AM.mov