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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.19.3-alpha",
+    "version": "0.19.3-alpha.13",
     "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

@@ -2,6 +2,10 @@ import { createSearchRegExp } from "utils/regexps";
 
 const MARK_TAGS = /<\/?mark>/gi;
 
+// mark tags not being removed from ref page
+// mark tags dif color on ref page
+// need to reset to first match on highlight change
+
 export const highlightTerms = (
     // eslint-disable-next-line no-undef
     elements: NodeListOf<Element>,
@@ -9,6 +13,7 @@ export const highlightTerms = (
 ): void => {
     searchTerm = searchTerm.trim();
     const searchExp = createSearchRegExp(searchTerm);
+    let scrolled = false;
     elements.forEach((element) => {
         if (
             element?.innerHTML.includes("<dx-") ||
@@ -17,20 +22,28 @@ export const highlightTerms = (
             return;
         }
 
-        let innerHtml = element.innerHTML.replace(
-            // Remove previously added mark tags
-            MARK_TAGS,
-            ""
-        );
+        try {
+            let innerHtml = element.innerHTML.replace(
+                // Remove previously added mark tags
+                MARK_TAGS,
+                ""
+            );
+
+            if (searchTerm) {
+                innerHtml = innerHtml.replace(searchExp, "<mark>$&</mark>");
+            }
 
-        if (searchTerm) {
-            innerHtml = innerHtml.replace(searchExp, "<mark>$&</mark>");
+            element.innerHTML = innerHtml;
+        } catch (e) {
+            console.error(e, element);
         }
 
-        element.innerHTML = innerHtml;
+        console.log("should i scroll?");
+        const mark = element.querySelector("mark");
+        if (mark && !scrolled) {
+            scrolled = true;
+            console.log("scrolling", element);
+            element.scrollIntoView({ block: "nearest" });
+        }
     });
-
-    if (elements.length > 0) {
-        elements[0].scrollIntoView(true);
-    }
 };