From 343f466788abc308b91a414ef61bba816ac8875c Mon Sep 17 00:00:00 2001
From: sct <sctsnipe@gmail.com>
Date: Sun, 27 Dec 2020 15:31:18 +0000
Subject: [PATCH] fix(frontend): search clear button now correctly triggers
 routing

---
 src/components/Layout/SearchInput/index.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/Layout/SearchInput/index.tsx b/src/components/Layout/SearchInput/index.tsx
index 643235ae8..3dde6345f 100644
--- a/src/components/Layout/SearchInput/index.tsx
+++ b/src/components/Layout/SearchInput/index.tsx
@@ -11,14 +11,14 @@ const SearchInput: React.FC = () => {
   const intl = useIntl();
   const { searchValue, setSearchValue, setIsOpen, clear } = useSearchInput();
   return (
-    <div className="flex-1 flex">
-      <div className="w-full flex md:ml-0">
+    <div className="flex flex-1">
+      <div className="flex w-full md:ml-0">
         <label htmlFor="search_field" className="sr-only">
           Search
         </label>
         <div className="relative w-full text-white focus-within:text-gray-200">
           <div className="absolute inset-y-0 left-0 flex items-center pointer-events-none">
-            <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
               <path
                 fillRule="evenodd"
                 clipRule="evenodd"
@@ -29,18 +29,22 @@ const SearchInput: React.FC = () => {
           <input
             id="search_field"
             style={{ paddingRight: searchValue.length > 0 ? '1.75rem' : '' }}
-            className="block w-full h-full pl-8 py-2 rounded-md border-transparent focus:border-transparent bg-gray-600 text-white placeholder-gray-300 focus:outline-none focus:ring-0 focus:placeholder-gray-400 sm:text-base"
+            className="block w-full h-full py-2 pl-8 text-white placeholder-gray-300 bg-gray-600 border-transparent rounded-md focus:border-transparent focus:outline-none focus:ring-0 focus:placeholder-gray-400 sm:text-base"
             placeholder={intl.formatMessage(messages.searchPlaceholder)}
             type="search"
             value={searchValue}
             onChange={(e) => setSearchValue(e.target.value)}
             onFocus={() => setIsOpen(true)}
-            onBlur={() => setIsOpen(false)}
+            onBlur={() => {
+              if (searchValue === '') {
+                setIsOpen(false);
+              }
+            }}
           />
           {searchValue.length > 0 && (
             <button
-              className="absolute inset-y-0 right-0 h-7 w-7 m-auto p-1 outline-none border-none focus:outline-none focus:border-none"
-              onClick={clear}
+              className="absolute inset-y-0 right-0 p-1 m-auto text-gray-400 transition border-none outline-none h-7 w-7 focus:outline-none focus:border-none hover:text-white"
+              onClick={() => clear()}
             >
               <ClearButton />
             </button>