UI: fix browser compatibility

.changeset/six-peas-vanish.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Fix old browser compatibility

apps/docs/content/docs/ui/components/tabs.client.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export function UrlBar() {
+  const [url, setUrl] = useState('');
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setUrl(window.location.pathname + window.location.hash);
+    }, 100);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return <pre className="rounded-lg border bg-card p-2 text-sm">{url}</pre>;
+}

apps/docs/content/docs/ui/components/tabs.mdx

@@ -6,6 +6,8 @@ description:
 preview: tabs
 ---
 
+import { UrlBar } from './tabs.client';
+
 ## Usage
 
 Import it in your MDX documents.
@@ -97,6 +99,8 @@ to automatically update the URL hash whenever time a new tab is selected:
 </Tabs>
 ```
 
+<UrlBar />
+
 <Tabs items={['Hello', 'World']} updateAnchor>
   <Tab id="tab-hello" value="Hello">
     Hello!

packages/ui/src/components/tabs.tsx

@@ -98,9 +98,9 @@ export function Tabs({
     const hash = window.location.hash.slice(1);
     if (!hash) return;
 
-    const entry = valueToIdMapRef.current
-      .entries()
-      .find(([_, id]) => id === hash);
+    const entry = Array.from(valueToIdMapRef.current.entries()).find(
+      ([_, id]) => id === hash,
+    );
 
     if (entry) setValue(entry[0]);
   }, []);