bug: ion-activated class removed when contextmenu event

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

When I hold element with ion-activatable class, hover only appears for a moment. Class ion-activated is removed after a while. It’s because changes in tap-click.ts file - event contextmenu is fired on longpress and after the changes, the hover breaks. link to changes

Expected Behavior

When I hold element with ion-activatable class, hover should stay as long as the hold is taking.

Steps to Reproduce

1. Add an element with a class to the view, e.g. <div class="ion-activatable">test</div>.
2. Hold element on mobile device.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 6.1.11 @angular-devkit/build-angular : 13.3.3 @angular-devkit/schematics : 13.3.3 @angular/cli : 13.3.3 @ionic/angular-toolkit : 6.1.0

Capacitor:

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

Cordova:

Cordova CLI : 10.0.0 Cordova Platforms : not available Cordova Plugins : not available

Utility:

cordova-res : not installed globally native-run : 1.5.0

System:

NodeJS : v16.14.2 (/usr/local/bin/node) npm : 8.5.0 OS : macOS Big Sur

Additional Information

No response

[liamdebeasi]

Thanks for the issue. The code in https://github.com/ionic-team/ionic-framework/commit/2c07a1566b6f8570f7e12a55ca8f86d8fb8a968e#diff-a2c042e751c5816179d1f73c952a6828a85b41cdf1f31d8d27f78222f7d4769fR163 was added to account for the .ion-activated class not being removed when right clicking an element when developing. We found this while trying to inspect elements with developer tools.

This change had the unintended side effect of causing .ion-activated to be removed when long pressing on a button on Android as the contextmenu event is fired there too. We were likely testing on iOS at the time, and iOS does not fire the contextmenu event at the moment (https://bugs.webkit.org/show_bug.cgi?id=213953).

In terms of fixing this, we can likely do the following:

1. Remove the contextmenu event listener.
2. Add code to the onMouseDown to exclude right clicks. This will result in the ripple effect/activated effect not being added when right clicking with a mouse.

[Klapik]

In @ionic/angular@6.1.12-dev.11656428805.122ccb6c When I hold element with ion-activatable class, hover stays as long as the hold is taking, good job!

One more thing that i found is the class ion-activated is removed on Android on pointercancel event (fired on touchmove) - this is not blocker because it works much better anyway. (i think there is no need to create new issue for this) On ios, hover stays despite the touchmove. I also checked the application with the Ionic 5 version and on Android also the hover remains despite the touchmove. I found the reason behind this is the last fix for ripple effect when scrolling.

I think we can live with the difference and your fix for contextevent is sufficient. Good job and thanks!