From fa096a464cdb32a0fbcd8fb0e6929a66ce1a1dcd Mon Sep 17 00:00:00 2001 From: mahdi Date: Wed, 16 Feb 2022 13:13:56 +0330 Subject: [PATCH] added cancle icon --- src/components/ReactTable4/GlobalFilter.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/ReactTable4/GlobalFilter.js b/src/components/ReactTable4/GlobalFilter.js index 32ff097..003df1f 100644 --- a/src/components/ReactTable4/GlobalFilter.js +++ b/src/components/ReactTable4/GlobalFilter.js @@ -5,7 +5,7 @@ import search from "./search-normal.svg"; import settings from "./settings.svg"; export const GlobalFilter = ({ filter, setFilter }) => { - // const [activeSearchBox, setActiveSearchBox] = useState(null); + const [activeSearchBox, setActiveSearchBox] = useState(false); const [value, setValue] = useState(filter); @@ -14,13 +14,17 @@ export const GlobalFilter = ({ filter, setFilter }) => { }, 400); return ( -
setActiveSearchBox(!activeSearchBox)} - > +
+ {activeSearchBox && ( + setActiveSearchBox(false)} + /> + )} @@ -30,6 +34,8 @@ export const GlobalFilter = ({ filter, setFilter }) => { setValue(e.target.value); onChange(e.target.value); }} + onFocus={() => setActiveSearchBox(true)} + // onBlur={() => setActiveSearchBox(false)} type="text" className={`text-xs text-blue-400 rounded focus:outline-none placeholder-blue-400 border`} style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}