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

package/package.json

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

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

@@ -1,11 +1,11 @@
 import { LightningElement } from "lwc";
+import debounce from "debounce";
 
 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;
-    selectedTreeItem: HTMLElement | null = null;
 
     timerId: ReturnType<typeof setTimeout> | null = null;
 
@@ -18,34 +18,28 @@ export class SidebarBase extends LightningElement {
         return this._sidebarContent;
     }
 
-    private onSelectedItemRendered(event: CustomEvent) {
-        event.stopPropagation();
-        this.selectedTreeItem = event.detail.element;
-    }
-
     /*Scroll to selected tree item */
-    private scrollToSelectedTreeItem() {
-        if (this.selectedTreeItem && this.sidebarContent) {
+    private _onSelectedItemRendered = (event: CustomEvent) => {
+        event.stopPropagation();
+        const selectedElement = event.detail.element;
+        if (selectedElement && this.sidebarContent) {
             const scrollHeight: number =
-                this.selectedTreeItem.getBoundingClientRect().bottom -
+                selectedElement.getBoundingClientRect().bottom -
                 this.sidebarContent.getBoundingClientRect().bottom + // We need to remove parent bottom
-                HEIGHT_OF_SIDEBAR_ITEM * 3; // add height of 3 more items so that user can see at least three more items after selected item
+                HEIGHT_OF_SIDEBAR_ITEM * 3 + // add height of 3 more items so that user can see at least three more items after selected item
+                this.sidebarContent.offsetTop; // We need to add sidebar offsetTop value as scrollTo will consider it
             this.sidebarContent.scrollTo({
                 top: scrollHeight,
                 behavior: "smooth"
             });
-            this.selectedTreeItem = null;
         }
-    }
+    };
 
-    renderedCallback(): void {
-        // 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(),
+    private onSelectedItemRendered = (event: CustomEvent) => {
+        debounce(
+            // @ts-ignore something weird happening here with debounce types
+            this._onSelectedItemRendered.bind(this)(event),
             WAIT_TIME_BEFORE_SCROLL_IN_MS
         );
-    }
+    };
 }

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

@@ -145,7 +145,6 @@ export default class Sidebar extends SidebarBase {
     }
 
     renderedCallback() {
-        super.renderedCallback()
         this.initializeSearchScrollPosition();
     }
 

package/src/modules/dx/sidebarOld/sidebarOld.ts

@@ -81,10 +81,6 @@ export default class Sidebar extends SidebarBase {
         this.matchMedia.addEventListener("change", this.onMediaChange);
     }
 
-    renderedCallback(): void {
-        super.renderedCallback();
-    }
-
     disconnectedCallback() {
         this.matchMedia.removeEventListener("change", this.onMediaChange);
     }