fix: Now forwards ref from SelectableFab allowing Tooltip usage

wandelbotsgmbh · Sep 30, 2024 · 3d67faf · 3d67faf
1 parent 825fc8a
commit 3d67faf
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 17 deletions.
diff --git a/src/components/SelectableFab.tsx b/src/components/SelectableFab.tsx
@@ -1,4 +1,5 @@
 import { Fab, styled, type FabProps } from "@mui/material"
+import { forwardRef, type Ref } from "react"
 
 const StyledSelectableFab = styled(Fab, {
   shouldForwardProp: (prop) => prop !== "selected",
@@ -35,13 +36,16 @@ type CodeFabProps = {
   selected?: boolean
 } & Omit<FabProps, "variant" | "color">
 
-export function SelectableFab({ selected, ...props }: CodeFabProps) {
-  return (
-    <StyledSelectableFab
-      selected={selected}
-      {...props}
-      color={"secondary"}
-      variant="circular"
-    />
-  )
-}
+export const SelectableFab = forwardRef(
+  (props: CodeFabProps, ref: Ref<HTMLButtonElement>) => {
+    return (
+      <StyledSelectableFab
+        ref={ref}
+        selected={props.selected}
+        {...props}
+        color={"secondary"}
+        variant="circular"
+      />
+    )
+  },
+)
diff --git a/stories/MuiSamples/Tooltip.tsx b/stories/MuiSamples/Tooltip.tsx
@@ -1,9 +1,8 @@
-import AddIcon from "@mui/icons-material/Add";
-import DeleteIcon from "@mui/icons-material/Delete";
-import Fab from "@mui/material/Fab";
-import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
-import React from "react";
+import AddIcon from "@mui/icons-material/Add"
+import DeleteIcon from "@mui/icons-material/Delete"
+import Fab from "@mui/material/Fab"
+import IconButton from "@mui/material/IconButton"
+import Tooltip from "@mui/material/Tooltip"
 
 export default function TooltipExample() {
   return (
@@ -24,5 +23,5 @@ export default function TooltipExample() {
         </Fab>
       </Tooltip>
     </div>
-  );
+  )
 }