diff --git a/src/components/List/List.spec.js b/src/components/List/List.spec.js index 631f9aba..18233f9b 100644 --- a/src/components/List/List.spec.js +++ b/src/components/List/List.spec.js @@ -457,6 +457,49 @@ describe('', () => { sinon.assert.callCount(onSelect, 2); }); + + it('should call onSelect when selected items are removed from the items list', () => { + const component = mount( + item.key} + onSelect={onSelect} + > + {(item) =>
{item.name}
} +
+ ); + + sinon.assert.notCalled(onSelect); + + // Remove itemObjs[0] which is selected + component.setProps({ items: [itemObjs[1], itemObjs[2]] }); + component.update(); + + sinon.assert.calledOnce(onSelect); + sinon.assert.calledWith(onSelect, [itemObjs[1]]); + }); + + it('should not call onSelect when items change but no selected items are removed', () => { + const component = mount( + item.key} + onSelect={onSelect} + > + {(item) =>
{item.name}
} +
+ ); + + // Update items but keep the selected item + component.setProps({ items: [itemObjs[0], itemObjs[1]] }); + component.update(); + + sinon.assert.notCalled(onSelect); + }); }); }); diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx index ca3455b0..e2e4837a 100644 --- a/src/components/List/List.tsx +++ b/src/components/List/List.tsx @@ -98,12 +98,18 @@ function List({ useDeepCompareEffect(() => { const includes = (xs: T[], x: T) => xs.map(selectedKeyMapper).includes(selectedKeyMapper(x)); + let hasRemovedItems = false; selection.forEach((item) => { if (!includes(items, item)) { removeItem(item); + hasRemovedItems = true; } }); - }, [items, Array.from(selection.values()), selectedKeyMapper]); + + if (hasRemovedItems) { + onSelect(Array.from(selection.values())); + } + }, [items, Array.from(selection.values()), selectedKeyMapper, onSelect]); useDeepCompareEffect(() => { if (selectAllRef.current) {