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) {