From cd5a6486dab3a3ad88346fd09858481013276fd7 Mon Sep 17 00:00:00 2001
From: Konnor Rogers <konnor5456@gmail.com>
Date: Mon, 25 Mar 2024 11:15:51 -0400
Subject: [PATCH] fix(tree) icons rendering as null (#1922)

* fix icons rendering as null

* prettier

* prettier

* Update docs/pages/resources/changelog.md

---------

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>
---
 docs/pages/resources/changelog.md     |  1 +
 src/components/tree/tree.component.ts |  8 ++++++--
 src/components/tree/tree.test.ts      | 25 +++++++++++++++++++++++++
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index 52a540a7..c735fc5a 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -46,6 +46,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Added the `hover-bridge` feature to `<sl-popup>` to support better tooltip accessibility [#1734]
 - Added the `loading` attribute and the `spinner` and `spinner__base` part to `<sl-menu-item>` [#1700]
 - Fixed files that did not have `.js` extensions. [#1770]
+- Fixed a bug in `<sl-tree>` when providing custom expand / collapse icons [#1922]
 - Fixed `<sl-dialog>` not accounting for elements with hidden dialog controls like `<video>` [#1755]
 - Fixed focus trapping not scrolling elements into view. [#1750]
 - Fixed more performance issues with focus trapping performance. [#1750]
diff --git a/src/components/tree/tree.component.ts b/src/components/tree/tree.component.ts
index 78123cca..28f47683 100644
--- a/src/components/tree/tree.component.ts
+++ b/src/components/tree/tree.component.ts
@@ -144,12 +144,16 @@ export default class SlTree extends ShoelaceElement {
       .forEach((status: 'expand' | 'collapse') => {
         const existingIcon = item.querySelector(`[slot="${status}-icon"]`);
 
+        const expandButtonIcon = this.getExpandButtonIcon(status);
+
+        if (!expandButtonIcon) return;
+
         if (existingIcon === null) {
           // No separator exists, add one
-          item.append(this.getExpandButtonIcon(status)!);
+          item.append(expandButtonIcon);
         } else if (existingIcon.hasAttribute('data-default')) {
           // A default separator exists, replace it
-          existingIcon.replaceWith(this.getExpandButtonIcon(status)!);
+          existingIcon.replaceWith(expandButtonIcon);
         } else {
           // The user provided a custom icon, leave it alone
         }
diff --git a/src/components/tree/tree.test.ts b/src/components/tree/tree.test.ts
index aec85286..8260430c 100644
--- a/src/components/tree/tree.test.ts
+++ b/src/components/tree/tree.test.ts
@@ -752,4 +752,29 @@ describe('<sl-tree>', () => {
       });
     });
   });
+
+  // https://github.com/shoelace-style/shoelace/issues/1916
+  it("Should not render 'null' if it can't find a custom icon", async () => {
+    const tree = await fixture<SlTree>(html`
+      <sl-tree>
+        <sl-tree-item>
+          Item 1
+          <sl-icon name="1-circle" slot="expand-icon"></sl-icon>
+          <sl-tree-item> Item A </sl-tree-item>
+        </sl-tree-item>
+        <sl-tree-item>
+          Item 2
+          <sl-tree-item>Item A</sl-tree-item>
+          <sl-tree-item>Item B</sl-tree-item>
+        </sl-tree-item>
+        <sl-tree-item>
+          Item 3
+          <sl-tree-item>Item A</sl-tree-item>
+          <sl-tree-item>Item B</sl-tree-item>
+        </sl-tree-item>
+      </sl-tree>
+    `);
+
+    expect(tree.textContent).to.not.includes('null');
+  });
 });