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")
);