Fixed scrolling when facet list is collapsed

src/components/face-category/FacetCategory.ts

@@ -79,11 +79,11 @@ export default class FacetCategory extends Vue {
     }
 
     toggle(): void {
-        if (this.collapsed == true) {
-            this.collapsed = false;
-        } else if (this.collapsed == false) {
-            this.collapsed = true;
-            //list.children("li:gt(4)").hide();
+        this.collapsed = !this.collapsed;
+    
+        // Scroll to the top of the page only when collapsing
+        if (this.collapsed) {
+            this.scrollTop();
         }
     }
 
@@ -94,6 +94,19 @@ export default class FacetCategory extends Vue {
         filterItem.category = this.filterName;
         filterItem.active = true;
         // this.$emit("filter", filterItem);
+
+        // Scroll to the top of the page when activating a new filter
+        this.scrollTop();
+
         return filterItem;
     }
+
+    scrollTop(): void {
+        setTimeout(() => {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth' // Smooth scroll to the top
+            });
+        }, 50); // Delay to allow the DOM to update
+    }
 }

src/views/search-view/search-view-component.vue

@@ -23,7 +23,8 @@
                 <!-- Display message if no results found -->
                 <div v-else-if="results.length == 0">
                     <div class="p-1 mb-0 text-sm bg-[#d8f4f7] rounded-lg" role="alert">
-                        <span class="font-medium pl-5">Your search yielded <strong> 0</strong> results.</span>
+                        <!-- <span class="font-medium pl-5">Your search yielded <strong> 0</strong> results.</span> -->
+                        <span class="font-medium pl-5">Your search term</span> <span class="font-semibold">{{ "'" + stringSearchTerm + "'" }}</span> yielded <strong>0</strong> results:
                     </div>
                 </div>
             </div>