@salesforcedevs/dx-components 0.43.3-tree-selected-scroll-3 → 0.43.3-tree-selected-scroll-6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.43.3-tree-selected-scroll-3",
+    "version": "0.43.3-tree-selected-scroll-6",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/base-elements/sidebarBase/sidebarBase.ts

@@ -1,11 +1,13 @@
 import { LightningElement } from "lwc";
 
 export const HEIGHT_OF_SIDEBAR_ITEM = 32;
+export const WAIT_TIME_BEFORE_SCROLL_IN_MS = 500;
 
 export class SidebarBase extends LightningElement {
     _sidebarContent: HTMLElement | null = null;
-    private selectedTreeItem: HTMLElement | null = null;
-    private isSidebarRendered = false;
+    selectedTreeItem: HTMLElement | null = null;
+
+    timerId: ReturnType<typeof setTimeout> | null = null;
 
     get sidebarContent() {
         if (!this._sidebarContent) {
@@ -19,13 +21,10 @@ export class SidebarBase extends LightningElement {
     private onSelectedItemRendered(event: CustomEvent) {
         event.stopPropagation();
         this.selectedTreeItem = event.detail.element;
-        if (this.isSidebarRendered) {
-            this.scrollToSelectedItem();
-        }
     }
 
     /*Scroll to selected tree item */
-    private scrollToSelectedItem(): void {
+    private scrollToSelectedTreeItem() {
         if (this.selectedTreeItem && this.sidebarContent) {
             const scrollHeight: number =
                 this.selectedTreeItem.getBoundingClientRect().bottom -
@@ -35,12 +34,18 @@ export class SidebarBase extends LightningElement {
                 top: scrollHeight,
                 behavior: "smooth"
             });
+            this.selectedTreeItem = null;
         }
-        this.selectedTreeItem = null;
     }
 
     renderedCallback(): void {
-        this.isSidebarRendered = true;
-        this.scrollToSelectedItem();
+        // Implementing debouncing kind of logic here, So that multiple scrolls won't be triggered during multiple renders of selected item
+        if (this.timerId) {
+            clearTimeout(this.timerId);
+        }
+        this.timerId = setTimeout(
+            () => this.scrollToSelectedTreeItem(),
+            WAIT_TIME_BEFORE_SCROLL_IN_MS
+        );
     }
 }