fix(tree): fix has-children logic (#11347)

**Related Issue:** #10731 ## Summary ✨🚸☑️🔨✨ @driskull Thanks for the patch! --------- Co-authored-by: Matt Driscoll <[email protected]>
Esri · Jan 28, 2025 · 5328ba7 · 5328ba7
1 parent a0a31a2
commit 5328ba7
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/packages/calcite-components/src/components/tree-item/tree-item.tsx b/packages/calcite-components/src/components/tree-item/tree-item.tsx
@@ -57,7 +57,7 @@ export class TreeItem extends LitElement implements InteractiveComponent {
 
   // #region State Properties
 
-  @state() hasEndActions = false;
+  @state() private hasEndActions = false;
 
   /**
    * Used to make sure initially expanded tree-item can properly
@@ -81,7 +81,9 @@ export class TreeItem extends LitElement implements InteractiveComponent {
   @property({ reflect: true }) expanded = false;
 
   /** @private */
-  @property({ reflect: true }) hasChildren: boolean = null;
+  @property({ reflect: true }) get hasChildren(): boolean {
+    return !!this.childTree;
+  }
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @property({ reflect: true }) iconFlipRtl: FlipContext;
@@ -266,6 +268,7 @@ export class TreeItem extends LitElement implements InteractiveComponent {
     )[0];
 
     this.childTree = childTree;
+    this.requestUpdate("hasChildren");
 
     this.updateChildTree();
   }
@@ -318,7 +321,6 @@ export class TreeItem extends LitElement implements InteractiveComponent {
   }
 
   preWillUpdate(): void {
-    this.hasChildren = !!this.el.querySelector("calcite-tree");
     this.depth = 0;
     let parentTree = this.el.closest("calcite-tree");
     if (!parentTree) {

diff --git a/packages/calcite-components/src/components/tree/tree.e2e.ts b/packages/calcite-components/src/components/tree/tree.e2e.ts
@@ -1386,4 +1386,27 @@ describe("calcite-tree", () => {
       expect(await tree.getProperty("selectedItems")).toHaveLength(1);
     });
   });
+
+  it("updates toggle icon when items are removed", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`
+      <calcite-tree>
+        <calcite-tree-item id="parent-item">
+          Parent
+          <calcite-tree id="child-tree" slot="children">
+            <calcite-tree-item>Child</calcite-tree-item>
+          </calcite-tree>
+        </calcite-tree-item>
+      </calcite-tree>
+    `);
+
+    const chevronSelector = `#parent-item >>> .${CSS.chevron}`;
+    expect(await page.find(chevronSelector)).toBeTruthy();
+
+    const child = await page.find("#child-tree");
+    await child.callMethod("remove");
+    await page.waitForChanges();
+
+    expect(await page.find(chevronSelector)).toBeNull();
+  });
 });
diff --git a/packages/calcite-components/src/components/tree/tree.stories.ts b/packages/calcite-components/src/components/tree/tree.stories.ts
@@ -18,7 +18,7 @@ function allScaleTreeBuilder(
   context: { args: { selectionMode: Tree["selectionMode"]; lines: boolean } },
 ): string {
   const items = itemsStory();
-  const { selectionMode, lines } = context.args;
+  const { selectionMode = "single", lines } = context.args;
   const scales: Scale[] = ["s", "m", "l"];
 
   return html`
@@ -38,7 +38,7 @@ function allScaleTreeBuilder(
         (scale) => html`
           <div class="tree-container">
             <h3>${selectionMode} selection mode + ${scale} scale</h3>
-            <calcite-tree selection-mode="${selectionMode || "single"}" ${lines ? "lines" : ""} scale="${scale}">
+            <calcite-tree selection-mode="${selectionMode}" ${lines ? "lines" : ""} scale="${scale}">
               ${items}
             </calcite-tree>
           </div>