From f1bc3471a6514e51f0998c711fcd48120442a7d7 Mon Sep 17 00:00:00 2001 From: Aditya Telange <21258296+adityatelange@users.noreply.github.com> Date: Sat, 10 Apr 2021 00:59:24 +0530 Subject: [PATCH] Fix focus ghosting in search results O_o --- assets/js/fastsearch.js | 36 ++++++++++++++++++++---------------- 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/assets/js/fastsearch.js b/assets/js/fastsearch.js index 4e10778..8d4700b 100644 --- a/assets/js/fastsearch.js +++ b/assets/js/fastsearch.js @@ -3,7 +3,7 @@ import * as params from '@params'; var fuse; // holds our search engine var resList = document.getElementById('searchResults'); var sInput = document.getElementById('searchInput'); -var first, last = null +var first, last, current_elem = null var resultsAvailable = false; // load our search index @@ -38,8 +38,18 @@ window.onload = function () { xhr.send(); } -function activeToggle() { - document.activeElement.parentElement.classList.toggle("focus") +function activeToggle(ae) { + document.querySelectorAll('.focus').forEach(function (element) { + // rm focus class + element.classList.remove("focus") + }); + if (ae) { + ae.focus() + document.activeElement = current_elem = ae; + ae.parentElement.classList.add("focus") + } else { + document.activeElement.parentElement.classList.add("focus") + } } function reset() { @@ -82,7 +92,8 @@ sInput.addEventListener('search', function (e) { // kb bindings document.onkeydown = function (e) { let key = e.key; - let ae = document.activeElement; + var ae = document.activeElement; + let inbox = document.getElementById("searchbox").contains(ae) if (ae === sInput) { @@ -90,22 +101,18 @@ document.onkeydown = function (e) { while (elements.length > 0) { elements[0].classList.remove('focus'); } - } + } else if (current_elem) ae = current_elem; if (key === "ArrowDown" && resultsAvailable && inbox) { e.preventDefault(); if (ae == sInput) { // if the currently focused element is the search input, focus the of first
  • - activeToggle(); // rm focus class - resList.firstChild.lastChild.focus(); - activeToggle(); // add focus class + activeToggle(resList.firstChild.lastChild); } else if (ae.parentElement == last) { // if the currently focused element's parent is last, do nothing } else { // otherwise select the next search result - activeToggle(); // rm focus class - ae.parentElement.nextSibling.lastChild.focus(); - activeToggle(); // add focus class + activeToggle(ae.parentElement.nextSibling.lastChild); } } else if (key === "ArrowUp" && resultsAvailable && inbox) { e.preventDefault(); @@ -113,13 +120,10 @@ document.onkeydown = function (e) { // if the currently focused element is input box, do nothing } else if (ae.parentElement == first) { // if the currently focused element is first item, go to input box - activeToggle(); // rm focus class - sInput.focus(); + activeToggle(sInput); } else { // otherwise select the previous search result - activeToggle(); // rm focus class - ae.parentElement.previousSibling.lastChild.focus(); - activeToggle(); // add focus class + activeToggle(ae.parentElement.previousSibling.lastChild); } } else if (key === "ArrowRight" && resultsAvailable && inbox) { ae.click(); // click on active link