diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx index f35f2a6..6ac235b 100644 --- a/src/components/SearchInput/SearchInput.tsx +++ b/src/components/SearchInput/SearchInput.tsx @@ -8,21 +8,18 @@ import ReactGA from "react-ga"; import { searchQueryAtom } from "../../state/atoms"; import "./SearchInput.css"; +const apple = /iPhone|iPod|iPad|Macintosh|MacIntel|MacPPC/i; +const isApple = apple.test(window.navigator.platform); + +const mobile = /Android|iPhone|iPod|iPad|Opera Mini|IEMobile/i; +const isMobile = mobile.test(window.navigator.userAgent); + type SearchInputProps = {}; const SearchInput: React.FC = () => { const [value, setValue] = useState(""); const [query, setQuery] = useRecoilState(searchQueryAtom); const inputRef = useRef() as MutableRefObject; - const isMobile = useRef(false) as MutableRefObject; - const isApple = useRef(false) as MutableRefObject; - - useEffect(() => { - const apple = /iPhone|iPod|iPad|Macintosh|MacIntel|MacPPC/i; - const mobile = /Android|iPhone|iPod|iPad|Opera Mini|IEMobile/i; - isApple.current = apple.test(window.navigator.platform); - isMobile.current = mobile.test(window.navigator.userAgent); - }, [isApple, isMobile]); useHotkeys("ctrl+k,cmd+k", (e) => { e.preventDefault(); @@ -55,7 +52,7 @@ const SearchInput: React.FC = () => { .getElementById("beacon") ?.scrollIntoView({ block: "start", behavior: "smooth" }); }, - 250, + 500, [value] ); @@ -84,9 +81,7 @@ const SearchInput: React.FC = () => { key === "Enter" && currentTarget.blur() } /> - {!value && !isMobile.current && ( - {isApple.current ? : "Ctrl"} + K - )} + {!value && !isMobile && {isApple ? : "Ctrl"} + K} {value ? ( isReady() ? (