From 773c8f3a8cdf28c501353594342081cbe01ca651 Mon Sep 17 00:00:00 2001
From: dengqing <dengqing0821@gmail.com>
Date: Mon, 28 Mar 2022 10:43:16 +0800
Subject: [PATCH] fix:  BaseSelect uses `key` property of displayValues as
 `itemKey` (#265)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 🐛 BaseSelect uses the `key` property as the default key

* fix: `tagRender` must receive a value attribute

* add test case
---
 src/hooks/useDisplayValues.ts |  5 +++-
 tests/selector.spec.tsx       | 51 ++++++++++++++++++++++++++++++++++-
 2 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useDisplayValues.ts b/src/hooks/useDisplayValues.ts
index 64ed1ead..81309b68 100644
--- a/src/hooks/useDisplayValues.ts
+++ b/src/hooks/useDisplayValues.ts
@@ -49,9 +49,12 @@ export default (
         valueOptions.map(({ option }) => option),
       );
 
+      const value = toPathKey(valueCells);
+
       return {
         label,
-        value: toPathKey(valueCells),
+        value,
+        key: value,
         valueCells,
       };
     });
diff --git a/tests/selector.spec.tsx b/tests/selector.spec.tsx
index cbb9b007..3b20e6c9 100644
--- a/tests/selector.spec.tsx
+++ b/tests/selector.spec.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { mount } from './enzyme';
 import Cascader from '../src';
 import { addressOptions } from './demoOptions';
@@ -34,6 +34,55 @@ describe('Cascader.Selector', () => {
     expect(onChange).toHaveBeenCalledWith([['exist']], expect.anything());
   });
 
+  it('avoid reuse', () => {
+    const Tag: React.FC<any> = ({ children, onClose }) => {
+      const [visible, setVisible] = useState(true);
+      return (
+        <button
+          onClick={() => {
+            setVisible(false);
+            onClose();
+          }}
+          className={visible ? '' : 'reuse'}
+        >
+          {children}
+        </button>
+      );
+    };
+
+    const wrapper = mount(
+      <Cascader
+        options={[
+          { label: 'AA', value: 'aa' },
+          { label: 'BB', value: 'bb' },
+          { label: 'CC', value: 'cc' },
+          { label: 'DD', value: 'dd' },
+          { label: 'EE', value: 'ee' },
+        ]}
+        value={[['aa'], ['bb'], ['cc'], ['dd'], ['ee']]}
+        onChange={values => {
+          wrapper.setProps({
+            value: values,
+          });
+        }}
+        tagRender={({ label, onClose }) => (
+          <Tag onClose={onClose} id={label}>
+            {label}
+          </Tag>
+        )}
+        checkable
+      />,
+    );
+
+    for (let i = 5; i > 0; i--) {
+      const buttons = wrapper.find('button');
+      expect(buttons.length).toBe(i);
+      buttons.first().simulate('click');
+      wrapper.update();
+      expect(wrapper.find('.reuse').length).toBe(0);
+    }
+  });
+
   it('when selected modify options', () => {
     const wrapper = mount(<Cascader options={addressOptions} open />);