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” } }

[mobilemarines]

Unfortunately not. I haven´t been able to reproduce this issue in the emulators. I will reach out to my colleagues tomorrow and will get back to you when I got more info or examples. Appreciate your help and your quick responses! Thanks!

[ionitron-bot[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.