diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx index b20ef320f05..f62be8dc4ac 100644 --- a/core/src/components/toggle/toggle.tsx +++ b/core/src/components/toggle/toggle.tsx @@ -2,7 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core'; import { renderHiddenInput, inheritAriaAttributes } from '@utils/helpers'; import type { Attributes } from '@utils/helpers'; -import { hapticSelection } from '@utils/native/haptic'; +import { hapticAvailable, hapticSelection } from '@utils/native/haptic'; import { isRTL } from '@utils/rtl'; import { createColorClasses, hostContext } from '@utils/theme'; import { checkmarkOutline, removeOutline, ellipseOutline } from 'ionicons/icons'; @@ -34,6 +34,7 @@ export class Toggle implements ComponentInterface { private inputId = `ion-tg-${toggleIds++}`; private gesture?: Gesture; private focusEl?: HTMLElement; + private hapticEl?: HTMLElement; private lastDrag = 0; private inheritedAttributes: Attributes = {}; private toggleTrack?: HTMLElement; @@ -138,6 +139,10 @@ export class Toggle implements ComponentInterface { const isNowChecked = !checked; this.checked = isNowChecked; + if (this.hapticEl) { + this.hapticEl.click(); + } + this.ionChange.emit({ checked: isNowChecked, value, @@ -285,6 +290,33 @@ export class Toggle implements ComponentInterface { ); } + /** + * On Safari (iOS 18+) we can trigger haptic feedback programatically + * by rendering element + * with an associated