Ionic-framework: bug: ion-fab does not close if disabled on click

[Yohandah]

Bug Report

Ionic version:


[x] 5.x

Current behavior:

When you set the attribute [disable] of a ion-fab-button to false instantly after clicking on one of its children in its ion-fab-list then the ion-fab will not close on its own.

Expected behavior:

It should close.

Steps to reproduce:

https://stackblitz.com/edit/ionic-v5-disabled-fab?file=src/app/app.component.html

1. Open the stackblitz link above
2. Open the fab, click on the first button : it calls doStuffAndDisable() => the fab is disabled but not closed
3. Click the enable fab button to reset state
4. Open the fab, click on the second button : it calls doStuffAndDelayedDisable() => the fab is closed and disabled

Other information:

I have looked in different ways of doing this, one was calling manually await this.fab.close() THEN disable the button but it didn't work in a case where I had an async call to a WS made after, I don't know why ...

Maybe this is related to another issue I have with the ion-fab that is the ability of fully controlling its state without a "blackbox" effect https://github.com/ionic-team/ionic-framework/issues/21678

[liamdebeasi]

Thanks, I agree this is a bug. As a temporary workaround, you can do:

requestAnimationFrame(() => this.disabled = true);