ionic-framework: bug: ion-button stays highlighted/selected when clicked

Prequisites

• 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

Current Behavior

On an android device(tested on Android 9 so far), after clicking the ion-button, it stays highlighted. The effect seems to be the same like when hovering in the browser. Can´t really tell, as when inspecting the webview on the device, as soon as I select the ion-button in the dom, the effect disappears. So unforutnatelly I can´t see which classes are still applied on the button. Was able to reproduce the issue with a blank template and only added an ion-button like below. Didn´t change any stylings. The same issue also happened with ion-buttons in modals.

Expected Behavior

The button should be highlighted for a moment as a user feedback, but then switch back to the default color.

Steps to Reproduce

<ion-header [translucent]="true"> <ion-toolbar> <ion-button>Test</ion-button> <ion-title> Test </ion-title> </ion-toolbar> </ion-header>

Code Reproduction URL

https://github.com/mobilemarines/ionButtonTest/tree/master

Ionic Info

Ionic:

Ionic CLI : 5.4.4 (C:\Users\vogt\AppData\Roaming\npm\node_modules\ionic) Ionic Framework : @ionic/angular 5.6.11 @angular-devkit/build-angular : 12.1.2 @angular-devkit/schematics : 12.1.2 @angular/cli : 12.1.2 @ionic/angular-toolkit : 4.0.0

Utility:

cordova-res : 0.15.3 native-run : 1.4.0

System:

NodeJS : v12.18.2 (C:\Program Files\nodejs\node.exe) npm : 6.14.5 OS : Windows 10

Additional Information

{ “name”: “ionic-app-base”, “version”: “0.0.0”, “author”: “Ionic Framework”, “homepage”: “https://ionicframework.com/”, “scripts”: { “ng”: “ng”, “start”: “ng serve”, “build”: “ng build”, “test”: “ng test”, “lint”: “ng lint”, “e2e”: “ng e2e” }, “private”: true, “dependencies”: { “@angular/common”: “~12.1.1”, “@angular/compiler”: “~12.1.1”, “@angular/core”: “~12.1.1”, “@angular/forms”: “~12.1.1”, “@angular/platform-browser”: “~12.1.1”, “@angular/platform-browser-dynamic”: “~12.1.1”, “@angular/router”: “~12.1.1”, “@capacitor/android”: “^3.1.1”, “@capacitor/core”: “3.1.1”, “@ionic/angular”: “^5.5.2”, “rxjs”: “~6.6.0”, “tslib”: “^2.2.0”, “zone.js”: “~0.11.4” }, “devDependencies”: { “@angular-devkit/build-angular”: “~12.1.1”, “@angular-eslint/builder”: “~12.0.0”, “@angular-eslint/eslint-plugin”: “~12.0.0”, “@angular-eslint/eslint-plugin-template”: “~12.0.0”, “@angular-eslint/template-parser”: “~12.0.0”, “@angular/cli”: “~12.1.1”, “@angular/compiler”: “~12.1.1”, “@angular/compiler-cli”: “~12.1.1”, “@angular/language-service”: “~12.0.1”, “@capacitor/cli”: “3.1.1”, “@ionic/angular-toolkit”: “^4.0.0”, “@types/jasmine”: “~3.6.0”, “@types/jasminewd2”: “~2.0.3”, “@types/node”: “^12.11.1”, “@typescript-eslint/eslint-plugin”: “4.16.1”, “@typescript-eslint/parser”: “4.16.1”, “eslint”: “^7.6.0”, “eslint-plugin-import”: “2.22.1”, “eslint-plugin-jsdoc”: “30.7.6”, “eslint-plugin-prefer-arrow”: “1.2.2”, “jasmine-core”: “~3.8.0”, “jasmine-spec-reporter”: “~5.0.0”, “karma”: “~6.3.2”, “karma-chrome-launcher”: “~3.1.0”, “karma-coverage”: “~2.0.3”, “karma-coverage-istanbul-reporter”: “~3.0.2”, “karma-jasmine”: “~4.0.0”, “karma-jasmine-html-reporter”: “^1.5.0”, “protractor”: “~7.0.0”, “ts-node”: “~8.3.0”, “typescript”: “~4.2.4” } }