fixes #882

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
 

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;
+    });
+  });
 });

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

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>