fix(v2): select correct tab when items are incorrectly ordered

armano2 · armano2 · commit a504a8065dad · 2021-03-19T13:49:24.000+01:00
diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
@@ -46,10 +46,12 @@ function Tabs(props: Props): JSX.Element {
     }
   }
 
-  const handleTabChange = (event) => {
-    const selectedTab = event.target;
+  const handleTabChange = (
+    event: React.FocusEvent<HTMLLIElement> | React.MouseEvent<HTMLLIElement>,
+  ) => {
+    const selectedTab = event.currentTarget;
     const selectedTabIndex = tabRefs.indexOf(selectedTab);
-    const selectedTabValue = children[selectedTabIndex].props.value;
+    const selectedTabValue = values[selectedTabIndex].value;
 
     setSelectedValue(selectedTabValue);
 
diff --git a/packages/docusaurus-theme-classic/src/types.d.ts b/packages/docusaurus-theme-classic/src/types.d.ts
@@ -429,8 +429,8 @@ declare module '@theme/TabItem' {
   export type Props = {
     readonly children: ReactNode;
     readonly value: string;
-    readonly hidden: boolean;
-    readonly className: string;
+    readonly hidden?: boolean;
+    readonly className?: string;
   };
 
   const TabItem: (props: Props) => JSX.Element;

Original file line number	Diff line number	Diff line change
`@@ -46,10 +46,12 @@ function Tabs(props: Props): JSX.Element {`
`46`	`46`	`}`
`47`	`47`	`}`
`48`	`48`
`49`		`- const handleTabChange = (event) => {`
`50`		`- const selectedTab = event.target;`
	`49`	`+ const handleTabChange = (`
	`50`	`+ event: React.FocusEvent<HTMLLIElement> \| React.MouseEvent<HTMLLIElement>,`
	`51`	`+ ) => {`
	`52`	`+ const selectedTab = event.currentTarget;`
`51`	`53`	`const selectedTabIndex = tabRefs.indexOf(selectedTab);`
`52`		`- const selectedTabValue = children[selectedTabIndex].props.value;`
	`54`	`+ const selectedTabValue = values[selectedTabIndex].value;`
`53`	`55`
`54`	`56`	`setSelectedValue(selectedTabValue);`
`55`	`57`