fix: cascader should support double quotes in value and label (#245)

* fix: label should support " * chore: code clean * fix: LGTM test * chore: code clean * fix: LGTM * chore: code clean
react-component · Feb 8, 2022 · 6153468 · 6153468 · vercel · Feb 8, 2022
1 parent eea408a
commit 6153468
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 8 deletions.
diff --git a/examples/debug.tsx b/examples/debug.tsx
@@ -10,13 +10,13 @@ const addressOptions = [
     children: [],
   },
   {
-    label: '福建',
-    value: 'fj',
+    label: '福建 "',
+    value: 'fj "',
     title: '测试标题',
     children: [
       {
-        label: '福州',
-        value: 'fuzhou',
+        label: '福州"',
+        value: 'fuzhou "',
         children: [
           {
             label: '马尾',

diff --git a/src/OptionList/index.tsx b/src/OptionList/index.tsx
@@ -148,7 +148,9 @@ const RefOptionList = React.forwardRef<RefOptionListProps>((props, ref) => {
     for (let i = 0; i < activeValueCells.length; i += 1) {
       const cellPath = activeValueCells.slice(0, i + 1);
       const cellKeyPath = toPathKey(cellPath);
-      const ele = containerRef.current?.querySelector(`li[data-path-key="${cellKeyPath}"]`);
+      const ele = containerRef.current?.querySelector(
+        `li[data-path-key="${cellKeyPath.replace(/(?<!\\)"/g, '\\"')}"]`, // matches unescaped double quotes
+      );
       ele?.scrollIntoView?.({ block: 'nearest' });
     }
   }, [activeValueCells]);

diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
@@ -1,11 +1,11 @@
 /* eslint-disable react/jsx-no-bind */
 
-import React from 'react';
-import { resetWarned } from 'rc-util/lib/warning';
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
-import { mount } from './enzyme';
+import { resetWarned } from 'rc-util/lib/warning';
+import React from 'react';
 import Cascader from '../src';
 import { addressOptions, optionsForActiveMenuItems } from './demoOptions';
+import { mount } from './enzyme';
 
 describe('Cascader.Basic', () => {
   let selectedValue;
@@ -806,4 +806,26 @@ describe('Cascader.Basic', () => {
       wrapper.unmount();
     });
   });
+
+  it('should support double quote in label and value', () => {
+    const wrapper = mount(
+      <Cascader
+        options={[
+          {
+            label: 'bamboo "',
+            value: 'bamboo "',
+            children: [
+              {
+                label: 'bamboo2 "',
+                value: 'bamboo2 "',
+              },
+            ],
+          },
+        ]}
+        open
+      />,
+    );
+
+    wrapper.find(`li[data-path-key]`).simulate('click');
+  });
 });