Repository: adobe/spectrum-web-components

Issue #4459: [Bug]: Multiple change events dispatched from ActionMenu tray in mobile device
Created: 2024-05-15T16:07:15Z
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

Duplicate issue #4461: [Bug]: (iOS) sp-card (supplied with an actions slot) action menu opens tray and on menu item selection in tray, if other card is behind it registers click on it as well.
Created: 2024-05-15T17:37:14Z
Code of conduct

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

Impacted component(s)
Firefly
Expected behavior
on Selecting menu item in tray, it should not pass events to the component behind it.
Actual behavior
It passes the click event to sp-card behind it. It happens in iOS (iPhone 11 Pro) , all browser.
Screenshots

  
    
    

    video3.mp4
    
  

  

  


What browsers are you seeing the problem in?
Chrome
How can we reproduce this issue?

Go to https://studio.webcomponents.dev/edit/GnkodO5cuznEsnNm8DyF/src/index.ts?p=stories on iOS (iPhone 11)
Open action menu, such that behind a menu item in tray, there must be another sp-card
Check console logs. It prints card clicked , {index}  (0-based) when that card click event is triggered.
As can be seen in recording,


Card clicked 0 - which means action menu of index 0 card is clicked


Select a menu item in tray, such that card-3 is behind it . On click - it logs : Card clicked 3 , which means click was registered for card 3 as well.

Note : the issue reproduces on some Android as well, but the frequency is a bit low. But easily repro in iOS

  
    
    

    video3.mp4
    
  

  

  


Sample code that illustrates the problem
Story book - https://studio.webcomponents.dev/edit/GnkodO5cuznEsnNm8DyF/src/index.ts?p=stories
Logs taken while reproducing problem
No response

Closing comment (2024-05-21T18:01:29Z): hi @Rajdeepc in case this is helpful, our team has also created this sandbox that reliably reproduces the issue:
https://studio.webcomponents.dev/edit/OfeOwrikpHyrhWv6YvUI/src/index.ts?p=stories
In iOS 17.4 Safari the bug seems to be less frequent, but will eventually happen:
https://github.com/adobe/spectrum-web-components/assets/8974514/62d05d8e-961f-41ac-840a-1294bb264589
You can also see that there is a double change event happening as reported in: #4459
In iOS 17.4 using the Chrome browser the bug seems much more frequent and happens on most clicks:

  
    
    

    iosChromeClickthrough.mp4