fix: searchbar focus on Esc key press (#393)

eslint · Dec 26, 2022 · 6091d76 · 6091d76
1 parent 52f9eb5
commit 6091d76
Showing 1 changed file with 17 additions and 12 deletions.
diff --git a/src/assets/js/search.js b/src/assets/js/search.js
@@ -108,7 +108,7 @@ function maintainScrollVisibility(activeElement, scrollParent) {
     else if (isBelow) {
         scrollParent.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight);
     }
-    
+
 }
 function debounce(callback, delay) {
     let timerId;
@@ -134,16 +134,16 @@ const debouncedFetchSearchResults = debounce((query) => {
 searchInput.addEventListener('keyup', function (e) {
     const query = searchInput.value;
 
-    if(query === searchQuery) return;
+    if (query === searchQuery) return;
 
     if (query.length) searchClearBtn.removeAttribute('hidden');
     else searchClearBtn.setAttribute('hidden', '');
 
     if (query.length > 2) {
         debouncedFetchSearchResults(query);
 
-        document.addEventListener('click', function(e) {
-            if(e.target !== resultsElement) clearSearchResults();
+        document.addEventListener('click', function (e) {
+            if (e.target !== resultsElement) clearSearchResults();
         });
     } else {
         clearSearchResults();
@@ -152,28 +152,33 @@ searchInput.addEventListener('keyup', function (e) {
     searchQuery = query
 });
 
-searchClearBtn.addEventListener('click', function(e) {
+searchClearBtn.addEventListener('click', function (e) {
     searchInput.value = '';
     searchInput.focus();
     clearSearchResults();
     searchClearBtn.setAttribute('hidden', '');
 });
 
-document.addEventListener('keydown', function(e) {
+document.addEventListener('keydown', function (e) {
+
+    const searchResults = Array.from(document.querySelectorAll('.search-results__item'));
 
-    if(e.key === 'Escape'){
+    if (e.key === 'Escape') {
         e.preventDefault();
-        clearSearchResults();
-        searchInput.focus();
+        if (searchResults.length) {
+            clearSearchResults();
+            searchInput.focus();
+        } else if (!searchResults.length && document.activeElement === searchInput) {
+            searchInput.blur();
+        }
     }
 
-    if((e.metaKey || e.ctrlKey) && e.key === 'k'){
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
         e.preventDefault();
         searchInput.focus();
-        document.querySelector('.search').scrollIntoView({behaviour:"smooth",block: "start"});
+        document.querySelector('.search').scrollIntoView({ behaviour: "smooth", block: "start" });
     }
 
-    const searchResults = Array.from(document.querySelectorAll('.search-results__item'));
     if (!searchResults.length) return;
 
     switch (e.key) {