[UI & UX] 보이지 않는 Dropdown 요소가 클릭과 Focus를 빼앗아 가는 현상

프로젝트에서 구현했던 MultiSelect에서 특정 요소를 체크하려고 클릭을 했는데 체크 표시가 되지 않고 MultiSelect가 닫히는 에러가 발생했었다.

확인해보니 Focus와 같은 마우스로 발생하는 이벤트 들이 다른 요소로 빼앗기고 있었다.

 

둘다 expandable이라는 Dropdown 비슷한 요소를 활용한 방식이었는데, z-index가 높아서 빼앗기고 있던 것이었다.

심지어 해당 요소는 브라우저에서 보이지 않는 상태였기에, 보이지 않는 요소가 클릭이 되고. Focus를 빼앗아 갈 수 있다는 것이 신기하였다.

결국 Dropdown이 닫힌 상태에서는 내부의 요소의 z-index를 조정하는 방식으로 해결하였다.

 

 

이 과정에서 Focus를 확인하기 위해 f12 개발자도구에서 현재 포커스 확인하기 (tistory.com)

f12 개발자도구에서 현재 포커스 확인하기

에서 알려준 방식으로 콘솔에 현재 포커스를 계속 띄우면서 확인할 수 있었다.