click 이벤트보다 blur 이벤트가 먼저 발생하는 문제

■ 상황

드롭다운 input 컴포넌트를 직접 구현하는 상황이었다.

https://uxdesign.cc/ui-cheat-sheet-dropdown-field-a30025c0f432

input 하단의 드롭다운 메뉴에 있는 item들에게 click 이벤트를 걸어놨고,

input에서 focus가 다른 쪽으로 옮겨가면, 즉 blur가 되는 순간 드롭다운 메뉴가 사라지게끔 구현을 해놓은 상황.

드롭다운 메뉴를 펼쳐서 item을 클릭하려고 했는데, 갑자기 드롭다운 메뉴가 사라져버렸다.

 

■ 상세

드롭다운 메뉴의 item에 걸린 click 이벤트가 발생하기 전에 input의 blur 이벤트가 먼저 발생했기 때문.

 

mouse를 누르고나서, 눌렀던 손가락을 떼는 순간 mouseup이 발생하면서 동시에 click 이벤트가 발생한다.

그 예로, 버튼에 onclick 이벤트를 달고 버튼을 꾹 누른 채 마우스를 떼지 않으면

click 이벤트가 발생하지 않는 것을 볼 수 있을 것.

즉 mousedown → mousemove(하든지 말든지) → mouseup → click 순서로 발생하는데,

blur 이벤트는 mousedown이 되면서, 특정 element로부터 다른 element로 초점이 옮겨갔을 때 발생하는 이벤트이므로

click 이벤트보다 blur 이벤트가 먼저 발생하기 때문에 위와 같은 현상이 발생했던 것.

 

결론을 말하자면, click 이벤트를 mousedown 이벤트로 바꿔주기만 하면 정상적으로 동작한다.

말했듯이 mousedown 이벤트는 blur 이벤트보다 먼저 발생하기 때문에 

우리가 의도했던 대로, 드롭다운 메뉴의 item을 먼저 선택하고 나서 blur가 발생하게 된다.

 

■ 비고

출처는 stackoverflow.

https://stackoverflow.com/questions/39439115/how-to-execute-click-function-before-the-blur-function