fixes controlled tabs not setting state

user-interviews · Oct 3, 2023 · baf8095 · baf8095
1 parent 7ecb30a
commit baf8095
Showing 1 changed file with 28 additions and 25 deletions.
diff --git a/src/Tabs/Tabs.stories.tsx b/src/Tabs/Tabs.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { Tabs, Tab } from 'src/Tabs';
 
@@ -14,35 +14,38 @@ const meta: Meta<typeof Tabs> = {
 export default meta;
 type Story = StoryObj<typeof Tabs>;
 
+function ControlledRender() {
+  const [activeKey, setActiveKey] = useState('one');
+
+  const handleTabSelect = useCallback((eventKey) => {
+    alert(`onSelectTab called with tab key ${eventKey}`);
+    setActiveKey(eventKey);
+  }, []);
+
+  return (
+    <Tabs activeKey={activeKey} onSelect={handleTabSelect}>
+      <Tab eventKey="one" title="Tab One">
+        <div style={tabDivStyles}>Tab Content One</div>
+      </Tab>
+      <Tab eventKey="two" title="Tab Two">
+        <div style={tabDivStyles}>Tab Content Two</div>
+      </Tab>
+      <Tab eventKey="three" title="Tab Three">
+        <div style={tabDivStyles}>Tab Content Three</div>
+      </Tab>
+      <Tab disabled eventKey="four" title="Tab Four (disabled)">
+        <div style={tabDivStyles}>Tab Content Four</div>
+      </Tab>
+    </Tabs>
+  );
+}
+
 export const Controlled: Story = {
   args: {
     onSelect: (tabKey) => alert(`onSelect called with tab key ${tabKey}`),
     id: 'controlled',
   },
-  render: ({ ...args }) => {
-    const onSelectTab = (tabKey) => {
-      alert(`onSelectTab called with tab key ${tabKey}`);
-    };
-
-    return (
-      <div>
-        <Tabs activeKey="one" id="controlled" onSelect={(tabKey) => onSelectTab(tabKey)} {...args}>
-          <Tab eventKey="one" title="Tab One">
-            <div style={tabDivStyles}>Tab Content One</div>
-          </Tab>
-          <Tab eventKey="two" title="Tab Two">
-            <div style={tabDivStyles}>Tab Content Two</div>
-          </Tab>
-          <Tab eventKey="three" title="Tab Three">
-            <div style={tabDivStyles}>Tab Content Three</div>
-          </Tab>
-          <Tab disabled eventKey="four" title="Tab Four (disabled)">
-            <div style={tabDivStyles}>Tab Content Four</div>
-          </Tab>
-        </Tabs>
-      </div>
-    );
-  },
+  render: ControlledRender,
 };
 
 export const Uncontrolled: Story = {