Skip to content

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

Closed
@godanny86

Description

@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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions