From 2715d0216cbe053c3c5f9e76270e28aa58e9f3a2 Mon Sep 17 00:00:00 2001
From: Zachery Ng <zachery.ng@gmail.com>
Date: Thu, 22 Feb 2024 17:28:18 +0800
Subject: [PATCH] fix: button forwardRef

---
 .../src/components/shared/Button/Button.tsx   | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/components/shared/Button/Button.tsx b/packages/frontend/src/components/shared/Button/Button.tsx
index af845e0c..968cca72 100644
--- a/packages/frontend/src/components/shared/Button/Button.tsx
+++ b/packages/frontend/src/components/shared/Button/Button.tsx
@@ -98,19 +98,29 @@ const Button = forwardRef<
               href,
               ...baseLinkProps,
             };
-            return <a {...externalLinkProps}>{_children}</a>;
+            return (
+              // @ts-expect-error - ref
+              <a ref={ref} {...externalLinkProps}>
+                {_children}
+              </a>
+            );
           }
 
           // Internal link
           return (
-            <Link {...baseLinkProps} to={href}>
+            // @ts-expect-error - ref
+            <Link ref={ref} {...baseLinkProps} to={href}>
               {_children}
             </Link>
           );
         } else {
           const { ...buttonProps } = _props;
-          // @ts-expect-error - as prop is not a valid prop for button elements
-          return <button {...buttonProps}>{_children}</button>;
+          return (
+            // @ts-expect-error - as prop is not a valid prop for button elements
+            <button ref={ref} {...buttonProps}>
+              {_children}
+            </button>
+          );
         }
       },
       [],
@@ -161,8 +171,6 @@ const Button = forwardRef<
     return (
       <Component
         {...props}
-        // @ts-expect-error - ref is not a valid prop for button elements
-        ref={ref}
         className={buttonTheme({ ...styleProps, class: className })}
       >
         {cloneIcon(leftIcon, { ...iconSize })}