reset results on close

Author: conceptualspace

src/css/index.css

@@ -688,18 +688,18 @@ input:focus + .inputBorder, .expand:focus .inputBorder {
     color: var(--color);
 }
 
-.close-icon {
+.searchCloseBtn {
     position: absolute;
     right: 10px;
     top: 50%;
     transform: translateY(-50%);
     cursor: default;
-    font-size: 18px;
+    font-size: 20px;
     color: #ccc;
     transition: color 0.2s ease;
 }
 
-.close-icon:hover {
+.searchCloseBtn:hover {
     color: #fff;
 }
 

src/index.html

@@ -22,7 +22,7 @@
 
 <div id="searchContainer">
     <input type="text" id="searchInput" placeholder="Search...">
-    <span id="closeSearch" class="close-icon">&times;</span>
+    <span id="closeSearch" class="searchCloseBtn">&times;</span>
 </div>
 
 <!-- speed dial content injected here -->

src/js/index.js

@@ -1033,6 +1033,7 @@ function hideModals() {
     searchInput.value = '';
     searchInput.blur();
     searchContainer.classList.remove('active');
+    filterDials('');
 }
 
 function modalShowEffect(contentEl, modalEl) {
@@ -2443,6 +2444,7 @@ document.getElementById('closeSearch').addEventListener('click', () => {
 
     searchInput.value = ''; // Clear the search input
     searchContainer.classList.remove('active'); // Hide the search container
+    filterDials('');
 });