Closed
Description
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?
- Use an iOS simulator or real device (v17.2, v17.4)
- Navigate to the following playground: https://studio.webcomponents.dev/edit/JciavEjTy2VT17fMD1Rp/src/index.ts?p=stories
- Click the actionMenu button to open the tray
- Make a selection in the tray
- Check the console. Expected that each selection corresponds to a console statement about the change
- Observe that often an extra change event is dispatched following a selection from the tray
- 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