backport shoelace#1922

docs/docs/resources/changelog.md

@@ -53,6 +53,7 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
 - 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]

src/components/tree/tree.test.ts

@@ -751,4 +751,29 @@ describe('<wa-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<WaTree>(html`
+      <wa-tree>
+        <wa-tree-item>
+          Item 1
+          <sl-icon name="1-circle" slot="expand-icon"></sl-icon>
+          <wa-tree-item> Item A </wa-tree-item>
+        </wa-tree-item>
+        <wa-tree-item>
+          Item 2
+          <wa-tree-item>Item A</wa-tree-item>
+          <wa-tree-item>Item B</wa-tree-item>
+        </wa-tree-item>
+        <wa-tree-item>
+          Item 3
+          <wa-tree-item>Item A</wa-tree-item>
+          <wa-tree-item>Item B</wa-tree-item>
+        </wa-tree-item>
+      </wa-tree>
+    `);
+
+    expect(tree.textContent).to.not.includes('null');
+  });
 });

src/components/tree/tree.ts

@@ -146,13 +146,16 @@ export default class WaTree extends WebAwesomeElement {
       .filter(status => !!this.querySelector(`[slot="${status}-icon"]`))
       .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
         }