Fix focus theft on initial render

cultureamp · Nov 28, 2024 · c894833 · c894833
1 parent ed8396b
commit c894833
Showing 1 changed file with 13 additions and 3 deletions.
diff --git a/packages/components/src/Tile/subcomponents/GenericTile/GenericTile.tsx b/packages/components/src/Tile/subcomponents/GenericTile/GenericTile.tsx
@@ -53,14 +53,24 @@ export const GenericTile = ({
   ...restProps
 }: GenericTileProps): JSX.Element => {
   const [isFlipped, setIsFlipped] = useState<boolean>(false)
+
+  const isMountingRef = useRef(false)
   const infoButtonRef = useRef<HTMLButtonElement>(null)
   const infoButtonReturnRef = useRef<HTMLButtonElement>(null)
 
   useEffect(() => {
-    if (isFlipped) {
-      infoButtonReturnRef.current!.focus()
+    isMountingRef.current = true
+  }, [])
+
+  useEffect(() => {
+    if (!isMountingRef.current) {
+      if (isFlipped) {
+        infoButtonReturnRef.current!.focus()
+      } else {
+        infoButtonRef.current!.focus()
+      }
     } else {
-      infoButtonRef.current!.focus()
+      isMountingRef.current = false
     }
   }, [isFlipped])