@salesforcedevs/dx-components 1.32.0-alpha.4 → 1.32.0-alpha.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.32.0-alpha.4",
+    "version": "1.32.0-alpha.6",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -44,5 +44,5 @@
         "luxon": "3.4.4",
         "msw": "^2.12.4"
     },
-    "gitHead": "48ef4e10a9004131b3c63b3817d0d62ed1a28b6b"
+    "gitHead": "5016c91d92b1118478cc3b9d549541563fca3801"
 }

package/src/modules/dx/sidebar/sidebar.ts

@@ -161,6 +161,13 @@ export default class Sidebar extends SidebarBase {
 
     private onSearchChange(e: CustomEvent) {
         this.requestedFetchMoreResults = false;
+        const isFirstSearchHydration = this.searchValue === null;
+        const hasSelectedResult = (e.detail.results || []).some(
+            (result: SidebarSearchResult) => !!result.selected
+        );
+        if (isFirstSearchHydration && hasSelectedResult) {
+            this.scrollToSelectedSearchResult = true;
+        }
         this.searchResults = e.detail.results;
         this.searchValue = e.detail.value;
     }
@@ -204,18 +211,23 @@ export default class Sidebar extends SidebarBase {
         const searchContent = this.template.querySelector(
             ".sidebar-content-search"
         ) as HTMLElement | null;
-        const selectedResult = searchContent?.querySelector(
-            `dx-sidebar-search-result:nth-child(${
-                selectedSearchResultIndex + 1
-            })`
-        ) as HTMLElement | null;
+        const allResultItems = searchContent?.querySelectorAll(
+            "dx-sidebar-search-result"
+        );
+        const selectedResult =
+            (allResultItems?.[selectedSearchResultIndex] as HTMLElement) ||
+            null;
         if (!searchContent || !selectedResult) {
             return;
         }
 
-        searchContent.scrollTop =
-            selectedResult.offsetTop - searchContent.offsetTop;
-        this.scrollToSelectedSearchResult = false;
+        window.requestAnimationFrame(() => {
+            selectedResult.scrollIntoView({
+                block: "start",
+                inline: "nearest"
+            });
+            this.scrollToSelectedSearchResult = false;
+        });
     }
 
     private assignValueToLabel(node: TreeNode): void {