bug: datetime calls vibrate api on safari desktop and triggers error.

[sjdrew]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

datetime, time picker scroll on safari desktop produces console error on every click of hours or minutes.

Unhandled Promise rejection: – "Browser does not support the vibrate API" – "; Zone:" – "<root>" – "; Task:" – "Promise.then" – "; Value:" (2)

Expected Behavior

We have haptics installed and is used on mobile/native but when using same app on the web in browser datetime should not be trying to call the vibrate api.

If we remove the import { Haptics } the error goes away. But we need it present for mobile version.

Steps to Reproduce

Any app with datetime popup to scroll the time wheel and on safari desktop.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.1 (/opt/homebrew/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.3.0
@angular-devkit/build-angular : 14.2.5
@angular-devkit/schematics : 14.2.5
@angular/cli : 14.2.5
@ionic/angular-toolkit : 7.0.0

Capacitor:

Capacitor CLI : 4.3.0
@capacitor/android : 4.3.0
@capacitor/core : 4.3.0
@capacitor/ios : 4.3.0

Utility:

cordova-res : 0.15.4
native-run : 1.7.1

System:

NodeJS : v14.20.0 (/opt/homebrew/Cellar/node@14/14.20.0/bin/node)
npm : 6.14.17
OS : macOS Monterey

Additional Information

No response

[liamdebeasi]

Thanks for the report. Can you provide some clarified steps to reproduce the issue? I tested this with Safari 16.0 and was unable to reproduce the error.

[sjdrew]

Sure, you have to make sure you include Haptics, so have to have some reference to it. For example:

started a blank project.
home.page.ts

import { Component } from '@angular/core';
import { Haptics } from '@capacitor/haptics';
import { Platform } from '@ionic/angular';
@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
})
export class HomePage {

    constructor(
        private platform: Platform
    ) {

        if (this.platform.is('ios')) {

            Haptics.vibrate();
        }
    }

}

home.page.html

<ion-content [fullscreen]="true">
    <ion-datetime></ion-datetime>
</ion-content>

Then tap on the Time field and tap the wheel, the 2nd time you tap the wheel it starts throwing these errors on Safari.

I am using Safari desktop 15.6.1

Thanks.

[liamdebeasi]

Thanks! Can you try this dev build and let me know if it resolves the issue?

npm install @ionic/angular@6.3.2-dev.11665759273.1e3583c2

[liamdebeasi]

Thanks for the issue. This has been resolved via #26130, and a fix will be available in an upcoming release of Ionic Framework. Please feel free to continue testing the dev build, and let me know if you run into any issues.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.