Fix the hash focus

Author: hasparus

packages/components/src/components/tabs/index.client.tsx

@@ -8,7 +8,6 @@ import {
   useEffect,
   useId,
   useLayoutEffect,
-  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -205,20 +204,14 @@ function useActiveTabFromURL(
     tabsInSearchParams.includes(getTabKey(items, index)),
   );
 
-  console.log(
-    'tabIndexFromSearchParams',
-    tabIndexFromSearchParams,
-    tabsInSearchParams,
-    searchParamKey,
-  );
-
   useIsomorphicLayoutEffect(() => {
     const tabPanel = hash
       ? tabPanelsRef.current?.querySelector(`[role=tabpanel]:has([id="${hash}"])`)
       : null;
 
     if (tabPanel) {
-      for (const [index, el] of Object.entries(tabPanel)) {
+      let index = 0;
+      for (const el of tabPanelsRef.current!.children) {
         if (el === tabPanel) {
           setSelectedIndex(Number(index));
           // Note for posterity:
@@ -231,9 +224,9 @@ function useActiveTabFromURL(
           // Execute on next tick after `selectedIndex` update
           requestAnimationFrame(() => (location.hash = `#${hash}`));
         }
+        index++;
       }
     } else if (tabIndexFromSearchParams !== -1) {
-      console.log('setSelectedTab from search params', tabIndexFromSearchParams);
       // if we don't have content to scroll to, we look at the search params
       setSelectedIndex(tabIndexFromSearchParams);
     }

packages/components/src/components/tabs/tabs.stories.tsx

@@ -416,11 +416,11 @@ export const ManyTabs: Story = {
 export const CustomStyling: Story = {
   args: {
     items: ['Design', 'Develop', 'Deploy'],
-    className: 'border-b-4 border-purple-500',
+    className: 'border-b-4 gap-0.5 border-green-800',
     tabClassName: args =>
       args.selected
-        ? 'bg-purple-500 text-white'
-        : 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
+        ? 'bg-green-800 text-white rounded-t-none'
+        : 'bg-gray-100 text-gray-700 rounded-t-none',
     children: (
       <>
         <Tabs.Tab>Design your application</Tabs.Tab>
@@ -454,3 +454,17 @@ export const TabsSyncedWithStorageEvents: Story = {
     );
   },
 };
+
+export const ContentInHiddenPanelOpensByHash: Story = {
+  args: {
+    items: ['Docker', 'Binary'],
+    children: (
+      <>
+        <Tabs.Tab />
+        <Tabs.Tab>
+          <div id="binary">Binary</div>
+        </Tabs.Tab>
+      </>
+    ),
+  },
+};