fix(fab-button): improve ripple effect behavior on click (#25413)

resolves #21772

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.
          */

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,

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,