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

package/package.json

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

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

@@ -5,6 +5,14 @@ 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;
 
     timerId: ReturnType<typeof setTimeout> | null = null;
@@ -21,17 +29,20 @@ export class SidebarBase extends LightningElement {
     /*Scroll to selected tree item */
     private _onSelectedItemRendered = (event: CustomEvent) => {
         event.stopPropagation();
-        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"
-            });
+        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;
+            }
         }
     };