Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: small ion-fab-button with a ion-fab-list has a wrong click event area

See original GitHub issue

Bug Report

Ionic version:

[x] 5.x

Current behavior:

If a ion-fab has a ion-fab-button size="small" with a ion-fab-list, the area of the ion-fab will trigger the ion-fab-list even if the ion-fab-button isn’t pressed. Which makes the click event trigger without actually pressing the ion-fab-button. I encountered this issue while binding a (click) event to the ion-fab-button

Expected behavior:

The ion-fab-list should be triggered only when the ion-fab-button is pressed, and not the ion-fab area itself. Or the small ion-fab-button area should take the whole ion-fab area (so it’s triggered when pressing the ion-fab area).

Related code:

Press the red area of the first fab (normal size) : the ion-fab-button is triggered (ripple effect, click event, pointer is changing, …), the ion-fab-list as well
Press the red area of the second fab (small size) : the ion-fab-list is triggered but not the ion-fab-button (no ripple effect, no click event, pointer doesn’t change, …)

https://stackblitz.com/edit/ionic-v5-bug-fab-size

Issue Analytics

State:
Created 3 years ago
Comments:10 (5 by maintainers)

Top GitHub Comments

2reactions

liamdebeasicommented, Jul 17, 2020

Oh I didn’t even notice that. The ripple effect only fires when you click the ion-fab-button. It looks like ion-fab listens for a click event on the host, which is why clicking the button margin area opens the list, but does not trigger the ripple effect.

The ripple effect not firing is probably a bug.

1reaction

liamdebeasicommented, Jun 6, 2022

Can everyone try the following dev build and let me know if it resolves the issue?