I have a button in a component that disappears when it is pressed. The events that are bound to it still fire when it is pressed but not visible. Typically the components that this button is located in is part of a list of those components. The first button that is pressed in that list of components always disappears. When the other buttons are pressed in the other components they don’t seem to disappear. I haven’t had any luck recreating the bug when I run the code in a local browser on my machine.
<ion-item class="collection-item" *ngIf="collectionData">
<ion-card class="collection-card">
<ion-card-header class="collection-card-header">
<button ion-button color="primary" (click)="presentPopover($event)"> <!-- This button -->
<span class="collection-identifier">{{collectionData.identifier}}</span>
<span class="collection-name"> {{collectionData.name}}</span>
</button>
</ion-card-header>
....
</ion-item>
The definition of “primary” in the scss file is primary: #387ef5 I’m thinking that the button and text are somehow assuming the same color as the parent container but I can’t figure out how that is happening. The presentPopover() function pops up a PopoverController menu.
My packages.json file is using either the latest or fairly recent releases of Angular and Ionic.
"@angular/common": "5.0.3",
"@angular/compiler": "5.0.3",
"@angular/compiler-cli": "5.0.3",
"@angular/core": "5.0.3",
"@angular/forms": "5.0.3",
"@angular/http": "5.0.3",
"@angular/platform-browser": "5.0.3",
"@angular/platform-browser-dynamic": "5.0.3",
"ionic-angular": "^3.9.2",
...
I’m currently unable to debug on my phone but trying to work through that issue. I think there is a firewall rule blocking my access.