onBlur 때문에 onClick이 작동하지 않을 때

웹 개발을 하던 중, 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>

#REFERENCE

stackoverflow - "onclick() and onblur() ordering issue"