From c66ef5dd1087e263ec70444a68daeb34abbf7bca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Berg=C3=A9?= <berge.greg@gmail.com>
Date: Mon, 3 Mar 2025 22:10:24 +0100
Subject: [PATCH] Fix OpenAPI tabs selection (#2914)

---
 packages/react-openapi/src/OpenAPITabs.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/react-openapi/src/OpenAPITabs.tsx b/packages/react-openapi/src/OpenAPITabs.tsx
index 6640cd49d..28bd5fd3f 100644
--- a/packages/react-openapi/src/OpenAPITabs.tsx
+++ b/packages/react-openapi/src/OpenAPITabs.tsx
@@ -2,6 +2,7 @@
 
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { type Key, Tab, TabList, TabPanel, Tabs, type TabsProps } from 'react-aria-components';
+import { useEventCallback } from 'usehooks-ts';
 import { Markdown } from './Markdown';
 import { getOrCreateTabStoreByKey } from './useSyncedTabsGlobalState';
 
@@ -44,6 +45,16 @@ export function OpenAPITabs(
         }
         return items[0]?.key ?? null;
     });
+    const selectTab = useEventCallback((key: Key | null) => {
+        if (!key || key === tabKey) {
+            return;
+        }
+        const tab = items.find((item) => item.key === key);
+        if (!tab) {
+            return;
+        }
+        setTabKey(key);
+    });
     const selectedTab = items.find((item) => item.key === tabKey) ?? items[0] ?? null;
     const cancelDeferRef = useRef<(() => void) | null>(null);
     useEffect(() => {
@@ -53,9 +64,9 @@ export function OpenAPITabs(
         const store = getOrCreateTabStoreByKey(stateKey);
         return store.subscribe((state) => {
             cancelDeferRef.current?.();
-            cancelDeferRef.current = defer(() => setTabKey(state.tabKey));
+            cancelDeferRef.current = defer(() => selectTab(state.tabKey));
         });
-    }, [stateKey]);
+    }, [stateKey, selectTab]);
     useEffect(() => {
         return () => cancelDeferRef.current?.();
     }, []);
@@ -65,7 +76,7 @@ export function OpenAPITabs(
             <Tabs
                 className="openapi-tabs"
                 onSelectionChange={(tabKey) => {
-                    setTabKey(tabKey);
+                    selectTab(tabKey);
                     if (stateKey) {
                         const store = getOrCreateTabStoreByKey(stateKey);
                         store.setState({ tabKey });