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 = ({ children, onClose }) => { + const [visible, setVisible] = useState(true); + return ( + + ); + }; + + const wrapper = mount( + { + wrapper.setProps({ + value: values, + }); + }} + tagRender={({ label, onClose }) => ( + + {label} + + )} + 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();