fix(menu): ipad menu item click

packages/picker/src/InteractionController.ts

@@ -179,15 +179,6 @@ export class InteractionController implements ReactiveController {
 
     hostConnected(): void {
         this.init();
-        this.host.addEventListener('sp-opened', () => {
-            /**
-             * set shouldSupportDragAndSelect to false for mobile
-             * to prevent click event being captured behind the menu-tray
-             * we do this here because the menu gets reinitialized on overlay open
-             */
-            this.host.optionsMenu.shouldSupportDragAndSelect =
-                !this.host.isMobile.matches;
-        });
         this.host.addEventListener('sp-closed', () => {
             if (
                 !this.open &&

packages/picker/src/Picker.ts

@@ -49,6 +49,7 @@ import type { SlottableRequestEvent } from '@spectrum-web-components/overlay/src
 import { DependencyManagerController } from '@spectrum-web-components/reactive-controllers/src/DependencyManger.js';
 import {
     IS_MOBILE,
+    IS_TOUCH_DEVICE,
     MatchMediaController,
 } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';
 import type { Tooltip } from '@spectrum-web-components/tooltip';
@@ -84,6 +85,7 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
     };
 
     public isMobile = new MatchMediaController(this, IS_MOBILE);
+    public isTouchDevice = new MatchMediaController(this, IS_TOUCH_DEVICE);
 
     public strategy!: DesktopController | MobileController;
 
@@ -772,6 +774,7 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
                 role=${this.listRole}
                 .selects=${this.selects}
                 .selected=${this.value ? [this.value] : []}
+                .shouldSupportDragAndSelect=${!this.isTouchDevice.matches}
                 size=${this.size}
                 @sp-menu-item-keydown=${this.handleEscape}
                 @sp-menu-item-added-or-updated=${this.shouldManageSelection}

tools/reactive-controllers/src/MatchMedia.ts

@@ -14,6 +14,7 @@ import type { ReactiveController, ReactiveElement } from 'lit';
 export const DARK_MODE = '(prefers-color-scheme: dark)';
 export const IS_MOBILE =
     '(max-width: 743px) and (hover: none) and (pointer: coarse)';
+export const IS_TOUCH_DEVICE = '(hover: none) and (pointer: coarse)';
 
 export class MatchMediaController implements ReactiveController {
     key = Symbol('match-media-key');