@salesforcedevs/dx-components 0.43.3-tree-selected-scroll-8 → 0.43.3-tree-selected-scroll-9

package/package.json

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

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

@@ -1,20 +1,12 @@
 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 {
-
-    /**
-     * For a sidebar instance it needs to be scrolled only once when user is opening a url with selected item
-     * No need to scroll more than once if the event is trigged multiple times because of rerendering of component
-     */
-
-    private isSidebarScrolled = false;
-
     _sidebarContent: HTMLElement | null = null;
 
+    selectedElement: HTMLElement | null = null;
     timerId: ReturnType<typeof setTimeout> | null = null;
 
     get sidebarContent() {
@@ -26,31 +18,48 @@ export class SidebarBase extends LightningElement {
         return this._sidebarContent;
     }
 
-    /*Scroll to selected tree item */
-    private _onSelectedItemRendered = (event: CustomEvent) => {
-        event.stopPropagation();
-        if (!this.isSidebarScrolled) {
-            const selectedElement = event.detail.element;
-            if (selectedElement && this.sidebarContent) {
-                const scrollHeight: number =
-                    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
-                    this.sidebarContent.offsetTop; // We need to add sidebar offsetTop value as scrollTo will consider it
-                this.sidebarContent.scrollTo({
-                    top: scrollHeight,
-                    behavior: "smooth"
-                });
-                this.isSidebarScrolled = true;
-            }
+    renderedCallback(): void {
+        /**
+         * Implementing debouncing kind of logic here to scroll to selected element once tree rendering is done
+         */
+
+        if (this.timerId) {
+            clearTimeout(this.timerId);
+        }
+        this.timerId = setTimeout(
+            this.renderedCallbackWithTimeout,
+            WAIT_TIME_BEFORE_SCROLL_IN_MS
+        );
+    }
+
+    disconnectedCallback(): void {
+        if (this.timerId) {
+            clearTimeout(this.timerId);
         }
+    }
+
+    renderedCallbackWithTimeout = () => {
+        this.scrollToSelectedItem();
     };
 
     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
-        );
+        event.stopPropagation();
+        this.selectedElement = event.detail.element;
     };
+
+    /*Scroll to selected tree item */
+    private scrollToSelectedItem() {
+        if (this.selectedElement && this.sidebarContent) {
+            const scrollHeight: number =
+                this.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
+                this.sidebarContent.offsetTop; // We need to add sidebar offsetTop value as scrollTo will consider it
+            this.sidebarContent.scrollTo({
+                top: scrollHeight,
+                behavior: "smooth"
+            });
+            this.selectedElement = null;
+        }
+    }
 }

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

@@ -145,6 +145,7 @@ export default class Sidebar extends SidebarBase {
     }
 
     renderedCallback() {
+        super.renderedCallback()
         this.initializeSearchScrollPosition();
     }
 
@@ -159,6 +160,7 @@ export default class Sidebar extends SidebarBase {
     }
 
     disconnectedCallback() {
+        super.disconnectedCallback()
         this.matchMedia.removeEventListener("change", this.onMediaChange);
     }
 

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

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