fix: fix button bad children error (#1564)

Issue: #1498
QuivrHQ · Nov 3, 2023 · 5c732f1 · 5c732f1
1 parent 867904f
commit 5c732f1
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 23 deletions.
diff --git a/frontend/app/(home)/components/HomeHeader/components/PopoverMenuMobile.tsx b/frontend/app/(home)/components/HomeHeader/components/PopoverMenuMobile.tsx
@@ -18,17 +18,15 @@ export const PopoverMenuMobile = ({
       <Popover.Root>
         <div>
           <Popover.Anchor />
-          <Popover.Trigger>
-            <button
-              title="menu"
-              type="button"
-              className={cn(
-                "bg-[#D9D9D9] bg-opacity-30 rounded-full px-4 py-1",
-                color === "white" ? "text-white" : "text-black"
-              )}
-            >
-              <LuMenu size={32} />
-            </button>
+          <Popover.Trigger
+            title="menu"
+            type="button"
+            className={cn(
+              "bg-[#D9D9D9] bg-opacity-30 rounded-full px-4 py-1",
+              color === "white" ? "text-white" : "text-black"
+            )}
+          >
+            <LuMenu size={32} />
           </Popover.Trigger>
         </div>
         <Popover.Content

diff --git a/frontend/lib/components/ui/Button.tsx b/frontend/lib/components/ui/Button.tsx
@@ -6,7 +6,7 @@ import {
   TooltipTrigger,
 } from "@radix-ui/react-tooltip";
 import { cva, type VariantProps } from "class-variance-authority";
-import { ButtonHTMLAttributes, LegacyRef, forwardRef } from "react";
+import { ButtonHTMLAttributes, Ref, RefAttributes, forwardRef } from "react";
 import { FaSpinner } from "react-icons/fa";
 
 import { cn } from "@/lib/utils";
@@ -56,22 +56,25 @@ const Button = forwardRef(
     }: ButtonProps,
     forwardedRef
   ): JSX.Element => {
-    const buttonElement = (
-      <button
-        className={cn(ButtonVariants({ variant, brightness, className }))}
-        disabled={isLoading}
-        {...props}
-        ref={forwardedRef as LegacyRef<HTMLButtonElement>}
-      >
+    const buttonProps: ButtonProps & RefAttributes<HTMLButtonElement> = {
+      className: cn(ButtonVariants({ variant, brightness, className })),
+      disabled: isLoading,
+      ...props,
+      ref: forwardedRef as Ref<HTMLButtonElement> | undefined,
+    };
+
+    const buttonChildren = (
+      <>
         {children} {isLoading && <FaSpinner className="animate-spin" />}
-      </button>
+      </>
     );
+    const buttonElement = <button {...buttonProps}>buttonChildren</button>;
 
     if (tooltip !== undefined) {
       return (
         <TooltipProvider>
           <Tooltip>
-            <TooltipTrigger>{buttonElement}</TooltipTrigger>
+            <TooltipTrigger {...buttonProps}>{buttonChildren}</TooltipTrigger>
             <TooltipContent className="bg-gray-100 rounded-md p-1">
               {tooltip}
             </TooltipContent>
@@ -80,9 +83,8 @@ const Button = forwardRef(
       );
     }
 
-    return buttonElement;
+    return <button {...buttonProps}>{buttonChildren}</button>;
   }
 );
 
-Button.displayName = "Button";
 export default Button;