diff --git a/packages/picker/src/InteractionController.ts b/packages/picker/src/InteractionController.ts index 3c34907ac0..ce068b61b1 100644 --- a/packages/picker/src/InteractionController.ts +++ b/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 && diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts index c652c88d94..b392876b6b 100644 --- a/packages/picker/src/Picker.ts +++ b/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} diff --git a/tools/reactive-controllers/src/MatchMedia.ts b/tools/reactive-controllers/src/MatchMedia.ts index f740e0c923..4bb9c794a4 100644 --- a/tools/reactive-controllers/src/MatchMedia.ts +++ b/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');