From 93c10da760a7b179d3c29459aa7d5584c38e9f17 Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Sun, 30 Jul 2023 20:24:12 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20issue=20with=20header=20ac?=
 =?UTF-8?q?tion=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/board/index.tsx | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/pages/board/index.tsx b/src/pages/board/index.tsx
index fa7c7c3ec..8a8f8ad82 100644
--- a/src/pages/board/index.tsx
+++ b/src/pages/board/index.tsx
@@ -8,6 +8,7 @@ import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
 import { useSession } from 'next-auth/react';
 import { SSRConfig, Trans, useTranslation } from 'next-i18next';
 import Link from 'next/link';
+import { ForwardedRef, forwardRef } from 'react';
 import { Dashboard } from '~/components/Dashboard/Dashboard';
 import { useEditModeStore } from '~/components/Dashboard/Views/useEditModeStore';
 import { useNamedWrapperColumnCount } from '~/components/Dashboard/Wrappers/gridstack/store';
@@ -100,7 +101,10 @@ type SpecificButtonProps = {
 type HeaderActionButtonProps = Omit<ButtonProps, 'variant' | 'className' | 'h' | 'w' | 'px'> &
   (SpecificLinkProps | SpecificButtonProps);
 
-const HeaderActionButton = ({ children, ...props }: HeaderActionButtonProps) => {
+const HeaderActionButton = forwardRef<
+  HTMLButtonElement | HTMLAnchorElement,
+  HeaderActionButtonProps
+>(({ children, ...props }, ref) => {
   const { classes } = useCardStyles(true);
 
   const buttonProps: ButtonProps = {
@@ -114,21 +118,29 @@ const HeaderActionButton = ({ children, ...props }: HeaderActionButtonProps) =>
 
   if ('component' in props) {
     return (
-      <Button component={props.component} href={props.href} {...buttonProps}>
+      <Button
+        ref={ref as ForwardedRef<HTMLAnchorElement>}
+        component={props.component}
+        href={props.href}
+        {...buttonProps}
+      >
         {children}
       </Button>
     );
   }
 
-  return <Button {...buttonProps}>{children}</Button>;
-};
+  return (
+    <Button ref={ref as ForwardedRef<HTMLButtonElement>} {...buttonProps}>
+      {children}
+    </Button>
+  );
+});
 
 const beforeUnloadEventText = 'Exit the edit mode to save your changes';
 const editModeNotificationId = 'toggle-edit-mode';
 
 const ToggleEditModeButton = () => {
   const { enabled, toggleEditMode } = useEditModeStore();
-  const { classes } = useCardStyles(true);
   const { config, name: configName } = useConfigContext();
   const { mutateAsync: saveConfig } = api.config.save.useMutation();
   const namedWrapperColumnCount = useNamedWrapperColumnCount();