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" }}