@salesforcedevs/dx-components 0.19.3-alpha → 0.19.3-alpha.10

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.19.3-alpha",
+    "version": "0.19.3-alpha.10",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -27,6 +27,7 @@ export const SESSION_KEY = "dx-sidebar-search-state";
 
 const DEFAULT_RESULT_COUNT = 20;
 const SEARCH_DEBOUNCE_DELAY = 780;
+const HIGHLIGHT_DEBOUNCE_DELAY = 200;
 
 const UserRecentSearches = new RecentSearches();
 
@@ -217,10 +218,6 @@ export default class SidebarSearch extends LightningElement {
             this.onResultListChange
         );
 
-        if (this.value) {
-            this.dispatchHighlightedTermChange();
-        }
-
         if (!this.preloadedState) {
             if (this.value) {
                 this.submitSearch();
@@ -337,7 +334,7 @@ export default class SidebarSearch extends LightningElement {
         this.dispatchEvent(new CustomEvent("loading", { detail: loading }));
     }
 
-    private dispatchHighlightedTermChange() {
+    private dispatchHighlightedTermChange = debounce(() => {
         this.dispatchEvent(
             new CustomEvent("highlightedtermchange", {
                 detail: this.value,
@@ -345,7 +342,7 @@ export default class SidebarSearch extends LightningElement {
                 bubbles: true
             })
         );
-    }
+    }, HIGHLIGHT_DEBOUNCE_DELAY);
 
     private updateRecentSearches = () =>
         (this.recentSearches = UserRecentSearches.get().map((item: string) => ({

package/src/modules/utils/highlight/highlight.ts

@@ -9,6 +9,7 @@ export const highlightTerms = (
 ): void => {
     searchTerm = searchTerm.trim();
     const searchExp = createSearchRegExp(searchTerm);
+    let scrolled = false;
     elements.forEach((element) => {
         if (
             element?.innerHTML.includes("<dx-") ||
@@ -27,10 +28,13 @@ export const highlightTerms = (
             innerHtml = innerHtml.replace(searchExp, "<mark>$&</mark>");
         }
 
+        const mark = element.querySelector("mark");
+
+        if (mark && !scrolled) {
+            scrolled = true;
+            element.scrollIntoView({ block: "nearest" });
+        }
+
         element.innerHTML = innerHtml;
     });
-
-    if (elements.length > 0) {
-        elements[0].scrollIntoView(true);
-    }
 };