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

[Yohandah]

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

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. We add margin to the inner ion-fab-button when it is small to keep it aligned with the list. You can remove the margin if you would like, but you will need to re-align the inner buttons as well.

[Yohandah]

@liamdebeasi Okay thanks .. I still don't get why clicking into the margin of the ion-fab-button opens the ion-fab-list but do not trigger the cursor, ripple effect, and click event of the ion-fab-button then .. I thought it was wrongly binded to the ion-fab area ?

[liamdebeasi]

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.

[ionitron-bot]

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.

For a guide on how to create a pull request and test this project locally to see your changes, see our contributing documentation.

Thank you!

[Yohandah]

@liamdebeasi Yeah that's my issue! Because I need to catch when the ion-fab-list opens or close and this little area doesn't allow me to track this since the ion-fab-button doesn't catch the (click) event.

The ripple effect not firing is probably a bug.

There's also the cursor that's not into "click" (pointer) mode.

If I have time I'll try to look into it and work on a bugfix but I'm not sure I'm up to the task haha ^^". Maybe switching the margin to padding could work.

[liamdebeasi]

What you described makes sense. Thanks for following up, otherwise I would have missed that 😄 .

[Akash280899]

When clicking on ion-fab , the ripple effect not working. is the issue been solved?

[liamdebeasi]

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

6.1.9-dev.11654537362.165e92c3

Example: npm install @ionic/angular@6.1.9-dev.11654537362.165e92c3

[liamdebeasi]

Thanks for the issue. This has been resolved via #25413, and a fix will be available in an upcoming release of Ionic Framework. Please feel free to continue testing the dev build. This fix will also be available in the next nightly build of Ionic.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.