From a00181f1dea994113588b61eb73c6211d1f14b61 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Thu, 9 Mar 2023 19:48:37 +0800
Subject: [PATCH 1/2] Revert "Revert "fix: quote in key should not cause tabs
 crash (#655)""

This reverts commit 86ab6e3a427e51e54ed72fb8817ee59ce04840d8.
---
 src/TabNavList/TabNode.tsx | 3 ++-
 src/TabNavList/index.tsx   | 4 ++--
 src/util.ts                | 5 +++++
 tests/index.test.tsx       | 4 ++++
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/TabNavList/TabNode.tsx b/src/TabNavList/TabNode.tsx
index 932b32a1..00e4aa02 100644
--- a/src/TabNavList/TabNode.tsx
+++ b/src/TabNavList/TabNode.tsx
@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import KeyCode from 'rc-util/lib/KeyCode';
 import * as React from 'react';
 import type { EditableConfig, Tab } from '../interface';
+import { genDataNodeKey } from '../util';
 
 export interface TabNodeProps {
   id: string;
@@ -56,7 +57,7 @@ function TabNode({
     <div
       key={key}
       // ref={ref}
-      data-node-key={key}
+      data-node-key={genDataNodeKey(key)}
       className={classNames(tabPrefix, {
         [`${tabPrefix}-with-remove`]: removable,
         [`${tabPrefix}-active`]: active,
diff --git a/src/TabNavList/index.tsx b/src/TabNavList/index.tsx
index 9ef1c525..4fe1a7ee 100644
--- a/src/TabNavList/index.tsx
+++ b/src/TabNavList/index.tsx
@@ -22,7 +22,7 @@ import type {
   TabsLocale,
 } from '../interface';
 import TabContext from '../TabContext';
-import { stringify } from '../util';
+import { genDataNodeKey, stringify } from '../util';
 import AddButton from './AddButton';
 import ExtraContent from './ExtraContent';
 import OperationNode from './OperationNode';
@@ -311,7 +311,7 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
     setTabSizes(() => {
       const newSizes: TabSizeMap = new Map();
       tabs.forEach(({ key }) => {
-        const btnNode = tabListRef.current?.querySelector<HTMLElement>(`[data-node-key="${key}"]`);
+        const btnNode = tabListRef.current?.querySelector<HTMLElement>(`[data-node-key="${genDataNodeKey(key)}"]`);
         if (btnNode) {
           newSizes.set(key, {
             width: btnNode.offsetWidth,
diff --git a/src/util.ts b/src/util.ts
index e6ee069f..c11039b7 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -16,3 +16,8 @@ export function stringify<K extends string | number | symbol, V>(obj: Record<K,
 
   return JSON.stringify(tgt);
 }
+
+const RC_TABS_DOUBLE_QUOTE = 'TABS_DQ';
+export function genDataNodeKey(key: string): string {
+  return key.replace(/"/g, RC_TABS_DOUBLE_QUOTE);
+}
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 1317bd78..a83d96e7 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -510,4 +510,8 @@ describe('Tabs.Basic', () => {
     const { container } = render(getTabs({ tabBarStyle: { background: 'red' } }));
     expect(container.querySelector('.rc-tabs-nav')).toHaveStyle({ background: 'red' });
   });
+
+  it('key contains double quote should not crash', () => {
+    render(<Tabs items={[{key: '"key"', label: 'test'}]} />)
+  })
 });

From 8f9b2e580ee9db04bf72bc58c40b8858d78383eb Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Thu, 9 Mar 2023 19:55:20 +0800
Subject: [PATCH 2/2] fix: quotes in key crashes

---
 src/util.ts          | 6 ++++--
 tests/index.test.tsx | 4 ++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/util.ts b/src/util.ts
index c11039b7..5084d5fc 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /**
  * We trade Map as deps which may change with same value but different ref object.
  * We should make it as hash for deps
@@ -18,6 +20,6 @@ export function stringify<K extends string | number | symbol, V>(obj: Record<K,
 }
 
 const RC_TABS_DOUBLE_QUOTE = 'TABS_DQ';
-export function genDataNodeKey(key: string): string {
-  return key.replace(/"/g, RC_TABS_DOUBLE_QUOTE);
+export function genDataNodeKey(key: React.Key): string {
+  return String(key).replace(/"/g, RC_TABS_DOUBLE_QUOTE);
 }
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index a83d96e7..ee2c0a57 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -513,5 +513,9 @@ describe('Tabs.Basic', () => {
 
   it('key contains double quote should not crash', () => {
     render(<Tabs items={[{key: '"key"', label: 'test'}]} />)
+  });
+
+  it('key could be number', () => {
+    render(<Tabs items={[{key: 1 as any, label: 'test'}]} />)
   })
 });