wonderlandpark/core
2
1
Fork 0
mirror of https://github.com/koreanbots/core.git synced 2025-12-16 06:20:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: search box ref

Browse Source
This commit is contained in:
wonderlandpark 2021-03-24 12:29:43 +09:00
parent 2a3612d091
commit f7f905ea49
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/Search.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useState } from 'react' import { useEffect, useRef, useState } from 'react'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import Link from 'next/link' import Link from 'next/link'
@ -8,9 +8,11 @@ import { BotList, ResponseProps } from '@types'
import DiscordAvatar from '@components/DiscordAvatar' import DiscordAvatar from '@components/DiscordAvatar'
import Day from '@utils/Day' import Day from '@utils/Day'
import useOutsideClick from '@utils/useOutsideClick'
const Search = (): JSX.Element => { const Search = (): JSX.Element => {
const router = useRouter() const router = useRouter()
const ref = useRef()
const [query, setQuery] = useState('') const [query, setQuery] = useState('')
const [recentSearch, setRecentSearch] = useState([]) const [recentSearch, setRecentSearch] = useState([])
const [data, setData] = useState<ResponseProps<BotList>>(null) const [data, setData] = useState<ResponseProps<BotList>>(null)
@ -27,6 +29,7 @@ const Search = (): JSX.Element => {
setRecentSearch([]) setRecentSearch([])
} }
}, [router]) }, [router])
useOutsideClick(ref, () => setHidden(true))
const SearchResults = async (value: string) => { const SearchResults = async (value: string) => {
setQuery(value) setQuery(value)
try { try {
@ -69,8 +72,7 @@ const Search = (): JSX.Element => {
} }
return ( return (
<div onFocus={() => setHidden(false)} <div onFocus={() => setHidden(false)} ref={ref}>
onBlur={() => setTimeout(() => setHidden(true), 80)}>
<div <div
className='relative z-10 flex mt-5 w-full text-black dark:text-gray-100 dark:bg-very-black bg-white rounded-lg' className='relative z-10 flex mt-5 w-full text-black dark:text-gray-100 dark:bg-very-black bg-white rounded-lg'
> >