onBlur 때문에 onClick이 작동하지 않는 문제 해결하는 법

웹을 만들다보면, onFocus, onBlur, onClick을 태그에 옵션에 주어 많이 사용한다.

 

이 옵션들을 사용할 때 문제가 발생했는데, 순서의 문제가 발생했다.

 

나 같은 경우, 검색창을 만드는데, 검색창을 클릭, 즉 Focus를 넣었을 때, 추천 검색어가 밑에 주르륵 뜨도록 하고 싶었다.

그리고 검색창에 Focus가 사라졌거나, 추천 검색어를 클릭했을때, 추천 검색어 창이 사라지도록 하고 싶었다.

 

검색창에 Focus가 사라졌을때는, 검색창이라는 input 박스 이외에 다른 곳을 클릭했을때를 말한다.

 

이런 처리는 onBlur을 사용하여 해결할 수 있다.

onFocusOut이라는 옵션도 있지만, 이 옵션은 styled component에서 작동을 하지 않길래 onBlur을 사용했다...나중에 원인을 알아봐야하겠지만..

 

어쨌든 이럴때 문제가 있었다.

onBlur이 onClick보다 먼저 작동하는 것이다.

 

무슨 말이냐면, 추천 검색어를 클릭하려고 하는 순간, 검색창에서 Focus는 사라지고, 추천 검색어 창이 사라져서 클릭이 안되는 것이다!!

 

이 문제를 해결하기 위해, onBlur에 함수에 시간 지연을 넣어서 해결할까, 아니면 boolean 변수를 추가할까 고민을 했는데,

 

더 나은 방법이 있었다.

 

바로  onMouseDown이라는 옵션을 사용하는 것!

 

마우스 클릭을 했을때! 그러니까 마우스 버튼을 눌렀을때 작동하는 옵션인데,

이 옵션은 다행히 onBlur보다 먼저 작동하여 내가 겪는 문제를 해결할 수 있었다.