From efdaf90c5a767211e0034bab7cce5bd463ff5aa0 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 8 Jun 2022 13:28:20 -0400
Subject: [PATCH] fix(fab-button): improve ripple effect behavior on click
 (#25413)

resolves #21772
---
 core/src/components.d.ts                      |  4 ++++
 core/src/components/fab-button/fab-button.tsx | 16 ++++++++++++++++
 core/src/components/fab/fab.tsx               | 15 ++++++++-------
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 979a1101cb..b4e20ad6db 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -847,6 +847,10 @@ export namespace Components {
           * Where to align the fab horizontally in the viewport.
          */
         "horizontal"?: 'start' | 'end' | 'center';
+        /**
+          * Opens/Closes the FAB list container.
+         */
+        "toggle": () => Promise<void>;
         /**
           * Where to align the fab vertically in the viewport.
          */
diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx
index 39f8d00544..0597a1d879 100755
--- a/core/src/components/fab-button/fab-button.tsx
+++ b/core/src/components/fab-button/fab-button.tsx
@@ -22,6 +22,8 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
   shadow: true,
 })
 export class FabButton implements ComponentInterface, AnchorInterface, ButtonInterface {
+  private fab: HTMLIonFabElement | null = null;
+
   @Element() el!: HTMLElement;
 
   /**
@@ -119,6 +121,10 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
    */
   @Event() ionBlur!: EventEmitter<void>;
 
+  connectedCallback() {
+    this.fab = this.el.closest('ion-fab');
+  }
+
   private onFocus = () => {
     this.ionFocus.emit();
   };
@@ -127,6 +133,15 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
     this.ionBlur.emit();
   };
 
+  private onClick = () => {
+    const { fab } = this;
+    if (!fab) {
+      return;
+    }
+
+    fab.toggle();
+  };
+
   render() {
     const { el, disabled, color, href, activated, show, translucent, size } = this;
     const inList = hostContext('ion-fab-list', el);
@@ -144,6 +159,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
 
     return (
       <Host
+        onClick={this.onClick}
         aria-disabled={disabled ? 'true' : null}
         class={createColorClasses(color, {
           [mode]: true,
diff --git a/core/src/components/fab/fab.tsx b/core/src/components/fab/fab.tsx
index abf1c1ece2..221335062e 100644
--- a/core/src/components/fab/fab.tsx
+++ b/core/src/components/fab/fab.tsx
@@ -62,22 +62,23 @@ export class Fab implements ComponentInterface {
     return this.el.querySelector('ion-fab-button');
   }
 
-  private onClick = () => {
+  /**
+   * Opens/Closes the FAB list container.
+   * @internal
+   */
+  @Method()
+  async toggle() {
     const hasList = !!this.el.querySelector('ion-fab-list');
-    const getButton = this.getFab();
-    const isButtonDisabled = getButton?.disabled;
-
-    if (hasList && !isButtonDisabled) {
+    if (hasList) {
       this.activated = !this.activated;
     }
-  };
+  }
 
   render() {
     const { horizontal, vertical, edge } = this;
     const mode = getIonMode(this);
     return (
       <Host
-        onClick={this.onClick}
         class={{
           [mode]: true,
           [`fab-horizontal-${horizontal}`]: horizontal !== undefined,