From a3d00a92a0078e80d4529a6a60104aeb713c138b Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 26 Aug 2022 10:28:18 -0400
Subject: [PATCH] fixes #882

---
 docs/resources/changelog.md                |  4 +++-
 src/components/tree-item/tree-item.test.ts | 18 ++++++++++++++++++
 src/components/tree-item/tree-item.ts      | 10 +++++++++-
 src/components/tree/tree.ts                | 17 ++++++++++-------
 4 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 9a28dd6a..3c8584c0 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -10,10 +10,12 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
-- Added animation to `<sl-tree-item>` on expand and collapse
+- Added an expand/collapse animation to `<sl-tree-item>`
+- Added `sl-lazy-change` event to `<sl-tree-item>`
 - Fixed a bug in `<sl-popup>` that didn't account for the arrow's diagonal size
 - Fixed a bug in `<sl-tree-item>` that prevented custom expand/collapse icons from rendering
 - Fixed a bug in `<sl-tree-item>` where the `expand-icon` and `collapse-icon` slots were reversed
+- Fixed a bug in `<sl-tree-item>` that prevented the keyboard from working after lazy loading [#882](https://github.com/shoelace-style/shoelace/issues/882)
 
 ## 2.0.0-beta.82
 
diff --git a/src/components/tree-item/tree-item.test.ts b/src/components/tree-item/tree-item.test.ts
index 01649d6d..50f5b061 100644
--- a/src/components/tree-item/tree-item.test.ts
+++ b/src/components/tree-item/tree-item.test.ts
@@ -158,4 +158,22 @@ describe('<sl-tree-item>', () => {
       expect(leafItem.shadowRoot?.querySelector('.tree-item__item')?.part.contains('item--expanded')).to.be.true;
     });
   });
+
+  describe('when the item is lazy', () => {
+    it('should emit sl-lazy-change when the lazy attribute is added and removed', async () => {
+      // Arrange
+      const lazyChangeSpy = sinon.spy();
+
+      parentItem.addEventListener('sl-lazy-change', lazyChangeSpy);
+      parentItem.lazy = true;
+
+      // Act
+      await waitUntil(() => lazyChangeSpy.calledOnce);
+      parentItem.lazy = false;
+      await waitUntil(() => lazyChangeSpy.calledOnce);
+
+      // Assert
+      expect(lazyChangeSpy).to.have.been.calledTwice;
+    });
+  });
 });
diff --git a/src/components/tree-item/tree-item.ts b/src/components/tree-item/tree-item.ts
index 603fa8f1..caf76c8a 100644
--- a/src/components/tree-item/tree-item.ts
+++ b/src/components/tree-item/tree-item.ts
@@ -31,7 +31,10 @@ export function isTreeItem(element: Element) {
  * @event sl-after-expand - Emitted after the item expands and all animations are complete.
  * @event sl-collapse - Emitted when the item collapses.
  * @event sl-after-collapse - Emitted after the item collapses and all animations are complete.
- * @event sl-lazy-load - Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding.
+ * @event sl-lazy-change - Emitted when the item's lazy state changes.
+ * @event sl-lazy-load - Emitted when a lazy item is selected. Use this event to asynchronously load data and append
+ *  items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading
+ *  state and update the tree.
  *
  * @slot - The default slot.
  * @slot expand-icon - The icon to show when the item is expanded.
@@ -137,6 +140,11 @@ export default class SlTreeItem extends ShoelaceElement {
     }
   }
 
+  @watch('lazy', { waitUntilFirstUpdate: true })
+  handleLazyChange() {
+    emit(this, 'sl-lazy-change');
+  }
+
   private async animateExpand() {
     emit(this, 'sl-expand');
 
diff --git a/src/components/tree/tree.ts b/src/components/tree/tree.ts
index 9d88c63f..02c56060 100644
--- a/src/components/tree/tree.ts
+++ b/src/components/tree/tree.ts
@@ -82,6 +82,7 @@ export default class SlTree extends ShoelaceElement {
 
     this.addEventListener('focusin', this.handleFocusIn);
     this.addEventListener('focusout', this.handleFocusOut);
+    this.addEventListener('sl-lazy-change', this.updateItems);
 
     await this.updateComplete;
     this.mutationObserver = new MutationObserver(this.handleTreeChanged);
@@ -94,6 +95,7 @@ export default class SlTree extends ShoelaceElement {
     this.mutationObserver.disconnect();
     this.removeEventListener('focusin', this.handleFocusIn);
     this.removeEventListener('focusout', this.handleFocusOut);
+    this.removeEventListener('sl-lazy-change', this.updateItems);
   }
 
   // Generates a clone of the expand icon element to use for each tree item
@@ -300,11 +302,6 @@ export default class SlTree extends ShoelaceElement {
     }
   }
 
-  handleDefaultSlotChange() {
-    this.treeItems = [...this.querySelectorAll('sl-tree-item')];
-    [...this.treeItems].forEach(this.initTreeItem);
-  }
-
   handleFocusOut = (event: FocusEvent) => {
     const relatedTarget = event.relatedTarget as HTMLElement;
 
@@ -334,10 +331,16 @@ export default class SlTree extends ShoelaceElement {
     }
   };
 
+  updateItems() {
+    console.log('update');
+    this.treeItems = [...this.querySelectorAll('sl-tree-item')];
+    [...this.treeItems].forEach(this.initTreeItem);
+  }
+
   render() {
     return html`
-      <div part="base" class="tree" @click="${this.handleClick}" @keydown="${this.handleKeyDown}">
-        <slot @slotchange=${this.handleDefaultSlotChange}></slot>
+      <div part="base" class="tree" @click=${this.handleClick} @keydown=${this.handleKeyDown}>
+        <slot @slotchange=${this.updateItems}></slot>
         <slot name="expand-icon" hidden aria-hidden="true"> </slot>
         <slot name="collapse-icon" hidden aria-hidden="true"> </slot>
       </div>