From e411b571247bea857a1d767383cc419b9ebbf3c0 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 3 Jan 2023 10:10:14 -0500
Subject: [PATCH] fixes #1096

---
 docs/resources/changelog.md | 1 +
 src/components/tree/tree.ts | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 2d488c5e..e69b5786 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -22,6 +22,7 @@ This release includes a complete rewrite of `<sl-select>` to improve accessibili
 - Added the `<sl-option>` component
 - Added Traditional Chinese translation [#1086](https://github.com/shoelace-style/shoelace/pull/1086)
 - Fixed a bug in `<sl-tree-item>` where the checked/indeterminate states could get out of sync when using the `multiple` option [#1076](https://github.com/shoelace-style/shoelace/issues/1076)
+- Fixed a bug in `<sl-tree>` that caused `sl-selection-change` to emit before the DOM updated [#1096](https://github.com/shoelace-style/shoelace/issues/1096)
 - Updated the hover style of `<sl-menu-item>` to be consistent with `<sl-option>`
 - Updated the status of `<sl-tree>` and `<sl-tree-item>` from experimental to stable
 - Updated React wrappers to use the latest API from `@lit-labs/react` [#1090](https://github.com/shoelace-style/shoelace/pull/1090)
diff --git a/src/components/tree/tree.ts b/src/components/tree/tree.ts
index dd271a9a..f78a0306 100644
--- a/src/components/tree/tree.ts
+++ b/src/components/tree/tree.ts
@@ -226,7 +226,10 @@ export default class SlTree extends ShoelaceElement {
       previousSelection.length !== nextSelection.length ||
       nextSelection.some(item => !previousSelection.includes(item))
     ) {
-      this.emit('sl-selection-change', { detail: { selection: nextSelection } });
+      // Wait for the tree items' DOM to update before emitting
+      Promise.all(nextSelection.map(el => el.updateComplete)).then(() => {
+        this.emit('sl-selection-change', { detail: { selection: nextSelection } });
+      });
     }
   }