✨ feat(search): hide "clear search" icon if input is empty (welpo#388)

TheAwiteb · Sep 19, 2024 · 1ffe43f · 1ffe43f
1 parent 0bebcd1
commit 1ffe43f
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/sass/parts/_search.scss b/sass/parts/_search.scss
@@ -28,6 +28,7 @@ $icon-size: 1.3rem;
         }
 
         .close-icon {
+            display: none;
             position: absolute;
             right: $icon-size;
             margin-inline-start: 1rem;

diff --git a/static/js/searchElasticlunr.js b/static/js/searchElasticlunr.js
@@ -2675,6 +2675,7 @@ window.onload = function () {
         results.innerHTML = '';
         resultsContainer.style.display = 'none';
         searchInput.removeAttribute('aria-activedescendant');
+        clearSearchButton.style.display = 'none';
     }
 
     // Close modal when clicking/tapping outside.
@@ -2941,10 +2942,13 @@ window.onload = function () {
     searchInput.addEventListener(
         'input',
         async function () {
-            const searchTerm = this.value.trim();
+            const searchInput = this.value;
+            const searchTerm = searchInput.trim();
             const searchIndex = await searchIndexPromise;
             results.innerHTML = '';
 
+            // Use the raw input so the "clear" button appears even if there's only spaces.
+            clearSearchButton.style.display = searchInput.length > 0 ? 'block' : 'none';
             resultsContainer.style.display = searchTerm.length > 0 ? 'block' : 'none';
 
             // Perform the search and store the results.