fix: BaseSelect uses key property of displayValues as itemKey (#265)

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

* fix: `tagRender` must receive a value attribute

* add test case

Author: Dunqing

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,
       };
     });

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 />);