diff --git a/packages/chips/ChipSet.tsx b/packages/chips/ChipSet.tsx index c439b331c..3ce52f8f5 100644 --- a/packages/chips/ChipSet.tsx +++ b/packages/chips/ChipSet.tsx @@ -99,7 +99,7 @@ export default class ChipSet extends React.Component return { hasClass: (className: string) => this.classes.split(' ').includes(className), setSelected: () => { - const selectedChipIds = this.state.foundation.getSelectedChipIds(); + const selectedChipIds = this.state.foundation.getSelectedChipIds().slice(); this.setState({selectedChipIds}, () => { this.props.handleSelect(selectedChipIds); }); diff --git a/test/unit/chips/ChipSet.test.tsx b/test/unit/chips/ChipSet.test.tsx index 235371a1d..409f09d30 100644 --- a/test/unit/chips/ChipSet.test.tsx +++ b/test/unit/chips/ChipSet.test.tsx @@ -143,6 +143,51 @@ test('#handleSelect calls foundation.handleChipSelection with selectedChipId and td.verify(handleChipSelection('1', false), {times: 1}); }); +test('#handleSelect calls updates parent component with selectedChipIds correctly for filter chips', () => { + type HandleSelectMethod = (prevSelectedChipIds: string[], selectedChipId: string[]) => void; + type Props = { + handleSelect: HandleSelectMethod + }; + type State = {selectedChipIds: string[]}; + + class TestChipParentComponent extends React.Component { + state = {selectedChipIds: []}; + componentDidUpdate(_: Props, pState: State) { + if (pState.selectedChipIds !== this.state.selectedChipIds) { + this.props.handleSelect(pState.selectedChipIds, this.state.selectedChipIds); + } + } + handleSelect = (selectedChipIds: string[]) => { + this.setState({selectedChipIds}); + } + render() { + const Chip1 = ; + const Chip2 = ; + return ( + + {Chip1} + {Chip2} + + ); + } + } + + const handleChipSelection = coerceForTesting(td.func()); + const wrapper = mount( + + ); + const chipSet = wrapper.childAt(0); + chipSet.children().children().first().children().simulate('click'); + td.verify(handleChipSelection([], ['chip1']), {times: 1}); + chipSet.children().children().last().children().simulate('click'); + td.verify(handleChipSelection(['chip1'], ['chip1', 'chip2']), {times: 1}); +}); + + test('#handleInteraction calls #foundation.handleChipInteraction', () => { const handleChipInteraction = td.func(); const foundation = {handleChipInteraction};