Check existence of node during expand/collapse before acting on it

src/TreeView/index.tsx

@@ -163,14 +163,16 @@ const useTree = ({
     const toggledExpandIds = symmetricDifference(expandedIds, prevExpandedIds);
     if (onExpand != null && onExpand !== noop) {
       for (const id of toggledExpandIds) {
-        onExpand({
-          element: getTreeNode(data, id),
-          isExpanded: expandedIds.has(id),
-          isSelected: selectedIds.has(id),
-          isDisabled: disabledIds.has(id),
-          isHalfSelected: halfSelectedIds.has(id),
-          treeState: state,
-        });
+        if(data.find(d => d.id == id)) {
+          onExpand({
+            element: getTreeNode(data, id),
+            isExpanded: expandedIds.has(id),
+            isSelected: selectedIds.has(id),
+            isDisabled: disabledIds.has(id),
+            isHalfSelected: halfSelectedIds.has(id),
+            treeState: state,
+          });
+        }
       }
     }
   }, [
@@ -267,7 +269,7 @@ const useTree = ({
           multiSelect,
         });
       for (const id of controlledSelectedIds) {
-        propagateSelect &&
+        propagateSelect && 
           !disabledIds.has(id) &&
           dispatch({
             type: treeTypes.changeSelectMany,
@@ -283,15 +285,15 @@ const useTree = ({
   useEffect(() => {
     const toggleControlledExpandedIds = new Set<NodeId>(controlledExpandedIds);
     //nodes need to be expanded
-    const diffExpandedIds = difference(
+    const diffExpandedIds = new Set<NodeId>([...difference(
       toggleControlledExpandedIds,
       prevExpandedIds
-    );
+    )].filter((id) => data.find((n) => n.id == id)));
     //nodes to be collapsed
-    const diffCollapseIds = difference(
+    const diffCollapseIds = new Set<NodeId>([...difference(
       prevExpandedIds,
       toggleControlledExpandedIds
-    );
+    )].filter((id) => data.find((n) => n.id == id)));
     //controlled collapsing
     if (diffCollapseIds.size) {
       for (const id of diffCollapseIds) {

src/TreeView/utils.ts

@@ -392,7 +392,7 @@ export const propagatedIds = (
 ) =>
   ids.concat(
     ...ids
-      .filter((id) => isBranchNode(data, id))
+      .filter((id) => data.find(d => d.id == id) && isBranchNode(data, id))
       .map((id) => getDescendants(data, id, disabledIds))
   );
 

src/__tests__/ControlledExpandedNode.test.tsx

@@ -206,6 +206,25 @@ describe("Without node ids", () => {
     expect(nodesAfterExpandedAll[6]).toHaveAttribute("aria-expanded", "true");
     expect(nodesAfterExpandedAll[11]).toHaveAttribute("aria-expanded", "true");
   });
+  test("ExpandedIds should not throw if non-existent", () => {
+    const { queryAllByRole, rerender } = render(
+      <ControlledExpanded expandedIds={["does-not-exist"]} data={dataWithoutIds} />
+    );
+
+    const nodes = queryAllByRole("treeitem");
+    for(const node of nodes) {
+      expect(node).toHaveAttribute("aria-expanded", "false");
+    }
+
+    rerender(
+      <ControlledExpanded expandedIds={["does-not-exist-2"]} data={dataWithoutIds} />
+    );
+
+    const newNodes = queryAllByRole("treeitem");
+    for(const node of newNodes) {
+      expect(node).toHaveAttribute("aria-expanded", "false");
+    }
+  });
 });
 
 describe("With node ids", () => {
@@ -286,4 +305,23 @@ describe("With node ids", () => {
     expect(nodesAfterExpandedAll[6]).toHaveAttribute("aria-expanded", "true");
     expect(nodesAfterExpandedAll[11]).toHaveAttribute("aria-expanded", "true");
   });
+  test("ExpandedIds should not throw if non-existent", () => {
+    const { queryAllByRole, rerender } = render(
+      <ControlledExpanded expandedIds={["does-not-exist"]} data={dataWithIds} />
+    );
+
+    const nodes = queryAllByRole("treeitem");
+    for(const node of nodes) {
+      expect(node).toHaveAttribute("aria-expanded", "false");
+    }
+
+    rerender(
+      <ControlledExpanded expandedIds={["does-not-exist-2"]} data={dataWithIds} />
+    );
+
+    const newNodes = queryAllByRole("treeitem");
+    for(const node of newNodes) {
+      expect(node).toHaveAttribute("aria-expanded", "false");
+    }
+  });
 });

src/__tests__/ControlledTree.test.tsx

@@ -585,6 +585,21 @@ describe("Data without ids", () => {
     expect(getNodes()[0]).toHaveAttribute("aria-checked", "false");
     expect(getNodes()[1]).toHaveAttribute("aria-checked", "false");
   });
+  test("SelectedIds should not throw if non-existent", () => {
+    const { queryAllByRole } = render(
+
+      <MultiSelectCheckboxControlled
+        defaultExpandedIds={[]}
+        selectedIds={["does-not-exist"]}
+        data={dataWithoutIds}
+      />
+    );
+
+    const nodes = queryAllByRole("treeitem");
+    for(const node of nodes) {
+      expect(node).toHaveAttribute("aria-checked", "false");
+    }
+  });
 });
 
 describe("Data with ids", () => {
@@ -801,4 +816,20 @@ describe("Data with ids", () => {
     expect(newNodes[5]).toHaveAttribute("aria-checked", "true"); // Drinks->Tea
     expect(newNodes[6]).toHaveAttribute("aria-checked", "false"); // Vegetables
   });
+
+  test("SelectedIds should not throw if non-existent", () => {
+    const { queryAllByRole } = render(
+
+      <MultiSelectCheckboxControlled
+        defaultExpandedIds={["data-string", "690", 908, 42]}
+        selectedIds={["does-not-exist"]}
+        data={dataWithIds}
+      />
+    );
+
+    const nodes = queryAllByRole("treeitem");
+    for(const node of nodes) {
+      expect(node).toHaveAttribute("aria-checked", "false");
+    }
+  });
 });