From 18550e069f3a2311e93370ae4aaa15d7ff849fe5 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Thu, 9 Mar 2023 14:55:44 +0800
Subject: [PATCH] fix: quote in key should not cause tabs crash (#655)

---
 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'}]} />)
+  })
 });