Merge pull request #584 from raunofreiberg/fix/tabs-refs

fix(tabs): wait for TabPanel to mount before setting `hidden`

packages/tabs/src/index.tsx

@@ -620,6 +620,7 @@ export const TabPanel = forwardRefWithAs<TabPanelProps, "div">(
       TabsContext
     );
     let ownRef = useRef<HTMLElement | null>(null);
+    let isMountedRef = useRef<boolean>(false);
 
     let index = useDescendant(
       { element: ownRef.current! },
@@ -635,12 +636,20 @@ export const TabPanel = forwardRefWithAs<TabPanelProps, "div">(
       isSelected ? selectedPanelRef : null
     );
 
+    React.useEffect(() => {
+      isMountedRef.current = true;
+    }, []);
+
     return (
       <Comp
         // Each element with role `tabpanel` has the property `aria-labelledby`
         // referring to its associated tab element.
         aria-labelledby={makeId(tabsId, "tab", index)}
-        hidden={!isSelected}
+        // During the initial render `isSelected` would be `false`
+        // and hide the children, which prevents focusing via refs on mount.
+        // As a workaround, we wait for the component to mount, and then set the `hidden` attribute.
+        // I guess this is hackish, but it works.
+        hidden={isMountedRef.current ? !isSelected : false}
         // Each element that contains the content panel for a tab has role
         // `tabpanel`.
         // https://www.w3.org/TR/wai-aria-practices-1.2/#tabpanel