From 7543c84445e6698d29cafe75b423c33115bc534c Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 21 Sep 2022 14:28:35 -0500 Subject: [PATCH] fix(datetime): swiping wheel no longer dismisses card modal (#25981) --- .../picker-internal/picker-internal.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/core/src/components/picker-internal/picker-internal.tsx b/core/src/components/picker-internal/picker-internal.tsx index 4cde38426ae..ae91d97845d 100644 --- a/core/src/components/picker-internal/picker-internal.tsx +++ b/core/src/components/picker-internal/picker-internal.tsx @@ -1,5 +1,5 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; -import { Component, Element, Event, Host, h } from '@stencil/core'; +import { Component, Element, Event, Listen, Host, h } from '@stencil/core'; import { getElementRoot } from '../../utils/helpers'; @@ -30,6 +30,19 @@ export class PickerInternal implements ComponentInterface { @Event() ionInputModeChange!: EventEmitter; + /** + * When the picker is interacted with + * we need to prevent touchstart so other + * gestures do not fire. For example, + * scrolling on the wheel picker + * in ion-datetime should not cause + * a card modal to swipe to close. + */ + @Listen('touchstart') + preventTouchStartPropagation(ev: TouchEvent) { + ev.stopPropagation(); + } + componentWillLoad() { getElementRoot(this.el).addEventListener('focusin', this.onFocusIn); getElementRoot(this.el).addEventListener('focusout', this.onFocusOut);