There seems to be a bug over the ion-button whenever the disable property changes. This is quite weird, I’m pretty sure it is a bug.
This seems to be happening only when you have a ion-button that you mark as disabled based on a property on your component and this ion-button is inside a ion-buttons component (if the ion-button is not wrapped up inside ion-buttons then it works just fine). Once the button is disabled it remains this way… under the hood the action gets triggered because the button is actually enabled but the style of the button remains as disabled. I’ve review the generated html and css classes and once the button is enabled there’s no refference to the ‘button-disabled’ class
<ion-button (click)="change()">
CHANGE
</ion-button>
<ion-buttons slot="primary">
<ion-button [disabled]="disabled" (click)="action()">
<ion-icon name="home"></ion-icon>
</ion-button>
</ion-buttons>
On the component
public disabled = false;
public action() {
console.log('action triggered');
}
public change() {
this.disabled = !this.disabled;
}
Does someone else had this problem?
EDIT 1: Another thing is that from enabled to disabled it works, you can see the difference. from disabled to enabled is the problem.
EDIT 2: By triggering detectChanges whenever you switch from disable state doesn’t work either