ionitron-bot[bot]
commented
3 years ago Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.
Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.
If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.
For a guide on how to create a good reproduction, see our Contributing Guide.
mobilemarines
liamdebeasi
Prequisites
Ionic Framework Version
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">
`
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" } }