From d6afc54af006c02bd65490ea90c2ebe1af2937c0 Mon Sep 17 00:00:00 2001
From: lingdocs <71590811+lingdocs@users.noreply.github.com>
Date: Fri, 6 May 2022 23:40:08 -0500
Subject: [PATCH] keep focus on input element after search value clear

---
 website/src/components/SearchBar.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/website/src/components/SearchBar.tsx b/website/src/components/SearchBar.tsx
index 3388b4d..8c93e87 100644
--- a/website/src/components/SearchBar.tsx
+++ b/website/src/components/SearchBar.tsx
@@ -6,12 +6,15 @@
  *
  */
 
+import { useRef } from "react";
+
 const SearchBar = ({ state, optionsDispatch, handleSearchValueChange, onBottom }: {
   state: State
   optionsDispatch: (action: OptionsAction) => void,
   handleSearchValueChange: (searchValue: string) => void,
   onBottom?: boolean,
 }) => {
+  const inputRef = useRef(null);
   const LanguageToggle = ({ language }: { language: Language }) => {
     const arrowDirection = language === "Pashto" ? "right" : "left";
     return (
@@ -51,7 +54,9 @@ const SearchBar = ({ state, optionsDispatch, handleSearchValueChange, onBottom }
             style={{ borderRight: "0px", zIndex: 200 }}
             placeholder={placeholder}
             value={state.searchValue}
-            onChange={(e) => handleSearchValueChange(e.target.value)}
+            onChange={(e) => {
+              handleSearchValueChange(e.target.value);
+            }}
             name="search"
             className="form-control py-2 border-right-0 border"
             autoFocus={true}
@@ -62,12 +67,17 @@ const SearchBar = ({ state, optionsDispatch, handleSearchValueChange, onBottom }
             dir="auto"
             data-testid="searchInput"
             data-lpignore="true"
+            ref={inputRef}
           />
           <span className="input-group-append">
             <span
               className={`btn btn-outline-secondary${!state.searchValue ? " unclickable" : ""} clear-search-button border-left-0 border`}
               style={{ borderRadius: 0 }}
-              onClick={state.searchValue ? () => handleSearchValueChange("") : () => null}
+              onClick={state.searchValue ? () => {
+                handleSearchValueChange("");
+                // @ts-ignore
+                inputRef.current && inputRef.current.focus()
+              }: () => null}
               data-testid="clearButton"
             >
               <i className="fa fa-times" style={!state.searchValue ? { visibility: "hidden" } : {}}></i>