[ADD] website_sale_aplicoop: re-implement clear search button

Added × button to clear the search input field. When clicked:
- Clears the search text
- Updates lastSearchValue to prevent polling false-positive
- Calls infiniteScroll.resetWithFilters() to reload all products from server
- Maintains current category filter
- Returns focus to search input

The button appears when text is entered and hides when search is empty.

website_sale_aplicoop/static/src/js/realtime_search.js

@@ -156,12 +156,13 @@
                 JSON.stringify(self.lastCategoryValue)
             );
 
-            // Clear search button - DISABLED FOR NOW
-            // TODO: Re-implement without causing initialization issues
-            /*
+            // Clear search button
             self.clearSearchBtn = document.getElementById("clear-search-btn");
             if (self.clearSearchBtn) {
+                console.log("[realtimeSearch] Clear search button found, attaching listeners");
+
                 // Show/hide button based on input content (passive, no filtering)
+                // This listener is separate from the filtering listener
                 self.searchInput.addEventListener("input", function () {
                     if (self.searchInput.value.trim().length > 0) {
                         self.clearSearchBtn.style.display = "block";
@@ -173,20 +174,39 @@
                 // Clear search when button clicked
                 self.clearSearchBtn.addEventListener("click", function (e) {
                     e.preventDefault();
+                    e.stopPropagation();
                     console.log("[realtimeSearch] Clear search button clicked");
+
+                    // Clear the input
                     self.searchInput.value = "";
                     self.clearSearchBtn.style.display = "none";
+
+                    // Update last stored value to prevent polling from detecting "change"
+                    self.lastSearchValue = "";
+
+                    // Reset infinite scroll to reload all products from server
+                    if (
+                        window.infiniteScroll &&
+                        typeof window.infiniteScroll.resetWithFilters === "function"
+                    ) {
+                        console.log(
+                            "[realtimeSearch] Resetting infinite scroll to show all products"
+                        );
+                        window.infiniteScroll.resetWithFilters("", self.lastCategoryValue);
+                    } else if (!self.isInitializing) {
+                        // Fallback: filter locally
+                        self._filterProducts();
+                    }
+
+                    // Focus back to search input
                     self.searchInput.focus();
-                    // Trigger input event to update search results
-                    self.searchInput.dispatchEvent(new Event("input", { bubbles: true }));
                 });
 
-                // Initial check
+                // Initial check - don't show if empty
                 if (self.searchInput.value.trim().length > 0) {
                     self.clearSearchBtn.style.display = "block";
                 }
             }
-            */
 
             // Prevent form submission completely
             var form = self.searchInput.closest("form");

website_sale_aplicoop/views/website_templates.xml

@@ -473,15 +473,12 @@
             <div class="col-md-7">
               <!-- CRITICAL: This input is NOT inside a form to prevent Odoo from transforming it -->
               <!-- It must remain a pure HTML input element for realtime_search.js to detect value changes -->
-              <!-- TODO: Re-add clear button wrapper after fixing initialization issues
               <div style="position: relative;">
                 <input type="text" id="realtime-search-input" class="form-control realtime-search-box search-input-styled" placeholder="Search products..." autocomplete="off" style="padding-right: 40px;" />
                 <button type="button" id="clear-search-btn" class="btn btn-link" style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%); padding: 0; width: 30px; height: 30px; display: none; color: #6c757d; text-decoration: none; font-size: 1.5rem; line-height: 1;" aria-label="Clear search" title="Clear search">
                   ×
                 </button>
               </div>
-              -->
-              <input type="text" id="realtime-search-input" class="form-control realtime-search-box search-input-styled" placeholder="Search products..." autocomplete="off" />
             </div>
             <div class="col-md-5">
               <select name="category" id="realtime-category-select" class="form-select">