웹 개발을 하던 중, input에 onFocus를 하면 추천 검색어 Box를 띄우게 하였는데,
해당 Box를 클릭하면 input의 onBlur때문에 Box가 사라지면서 onClick이 작동하지 않는다.😡
여러방법을 시도하던 중, 인터넷검색을 통해 유사한 이슈를 겪는 경우가 많은걸 알게되었다. 그리고 사람들이 제시한 방법은 onClick대신 onMouseDown으로 대체하는 것이다. onMouseDown은 onBlur보다 먼저 작동하므로 박스가 사라지기 전에 클릭이 가능하다.
....
<ContentInput
//Input 박스
{...register("username", {
required: "Username is required",
})}
autoComplete="off"
type="text"
onFocus={() => setOpen(true)}
onBlur={() => setOpen(false)}
placeholder={t("inputPlaceholder")}
/>
....
<EachUser
//추천검색어 박스
key={user.username}
onMouseDown={(event) => handleRecommend(user, event)}
>
<UserServer>{user.server}</UserServer>
<Username>{user.username}</Username>
</EachUser>