From f1eef8400d0312237bde6a3dda20ff085c87df2e Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <anv11827@esri.com>
Date: Mon, 14 Aug 2023 17:48:29 -0500
Subject: [PATCH] fix(tree): selects all child items when selection-mode is set
 to ancestors (#7518)

**Related Issue:** #7104

## Summary

Selects all the child `calcite-tree-item` elements when the root element
is selected with `selection-mode="ancestors"`
---
 .../src/components/tree/tree.e2e.ts                   | 11 +++++++++++
 .../calcite-components/src/components/tree/tree.tsx   |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/tree/tree.e2e.ts b/packages/calcite-components/src/components/tree/tree.e2e.ts
index 10bfb8c06a6..4ed50470671 100644
--- a/packages/calcite-components/src/components/tree/tree.e2e.ts
+++ b/packages/calcite-components/src/components/tree/tree.e2e.ts
@@ -126,6 +126,11 @@ describe("calcite-tree", () => {
                 </calcite-tree-item>
                 <calcite-tree-item id="grandchild-two">
                   <span>Grandchild 2</span>
+                  <calcite-tree slot="children">
+                    <calcite-tree-item id="greatgrandchild">
+                      <span>Great Grandchild</span>
+                    </calcite-tree-item></calcite-tree
+                  >
                 </calcite-tree-item>
               </calcite-tree>
             </calcite-tree-item>
@@ -140,6 +145,7 @@ describe("calcite-tree", () => {
     const childTwo = await page.find("#child-two");
     const grandchildOne = await page.find("#grandchild-one");
     const grandchildTwo = await page.find("#grandchild-two");
+    const greatgrandchild = await page.find("#greatgrandchild");
 
     expect(one).not.toHaveAttribute("indeterminate");
     expect(one).not.toHaveAttribute("selected");
@@ -149,6 +155,7 @@ describe("calcite-tree", () => {
     expect(childOne).not.toHaveAttribute("selected");
     expect(grandchildOne).not.toHaveAttribute("selected");
     expect(grandchildTwo).not.toHaveAttribute("selected");
+    expect(greatgrandchild).not.toHaveAttribute("selected");
 
     // Puppeteer's element click will happen in the center of a component,
     // so we call the method to ensure it happens on the component of interest
@@ -163,6 +170,7 @@ describe("calcite-tree", () => {
     expect(childTwo).toHaveAttribute("selected");
     expect(grandchildOne).toHaveAttribute("selected");
     expect(grandchildTwo).toHaveAttribute("selected");
+    expect(greatgrandchild).toHaveAttribute("selected");
 
     await childOne.callMethod("click");
     await page.waitForChanges();
@@ -175,6 +183,7 @@ describe("calcite-tree", () => {
     expect(childTwo).toHaveAttribute("selected");
     expect(grandchildOne).not.toHaveAttribute("selected");
     expect(grandchildTwo).not.toHaveAttribute("selected");
+    expect(greatgrandchild).not.toHaveAttribute("selected");
 
     grandchildTwo.setProperty("disabled", true);
     await page.waitForChanges();
@@ -189,6 +198,7 @@ describe("calcite-tree", () => {
     expect(childTwo).not.toHaveAttribute("selected");
     expect(grandchildOne).not.toHaveAttribute("selected");
     expect(grandchildTwo).not.toHaveAttribute("selected");
+    expect(greatgrandchild).not.toHaveAttribute("selected");
 
     grandchildTwo.setProperty("disabled", false);
     await page.waitForChanges();
@@ -202,6 +212,7 @@ describe("calcite-tree", () => {
     expect(childTwo).toHaveAttribute("selected");
     expect(grandchildOne).toHaveAttribute("selected");
     expect(grandchildTwo).toHaveAttribute("selected");
+    expect(greatgrandchild).toHaveAttribute("selected");
   });
 
   describe("item selection", () => {
diff --git a/packages/calcite-components/src/components/tree/tree.tsx b/packages/calcite-components/src/components/tree/tree.tsx
index 77165d47654..a0b663743e4 100644
--- a/packages/calcite-components/src/components/tree/tree.tsx
+++ b/packages/calcite-components/src/components/tree/tree.tsx
@@ -357,7 +357,7 @@ export class Tree {
       item.indeterminate = selected.length > 0 && unselected.length > 0;
     }
 
-    childItemsWithChildren.forEach((el) => {
+    childItemsWithChildren.reverse().forEach((el) => {
       const directChildItems = Array.from(
         el.querySelectorAll<HTMLCalciteTreeItemElement>(":scope > calcite-tree > calcite-tree-item")
       );