예쁜 select 태그를 만들고 싶다면 꼭 알아야 하는 속성 tabIndex

한 줄 요약

select 태그를 커스텀하게 만들고 싶다면 div 태그에 tabIndex="0" 속성을 주고, blur 이벤트리스너를 활용해보자

 

 

여러 옵션 중 하나를 선택할 수 있게 해주는 HTML 태그가 있다. select 태그인데, 내부 운영용 툴을 만들다가 이 태그를 쓰게 되었다. select 태그를 쓰게 되면 디폴트로 아래 그림1와 같은 디자인이 따라온다. 이 디자인은 css로 바꿀 수 없다는 것이 문제였다.

그림1. select 태그 예시

아무리 내부용 툴이지만 이렇게 만들고 싶진 않아서, div 태그로 직접 select 태그를 구현하기로 했다. 적절한 style과 클릭 이벤트리스너를 달아서 아래 그림2와 같은 태그를 만들었다.

그림2. 커스텀 select 태그

div 태그로 select 태그를 흉내내면서 생긴 하나의 문제가 있었다. select 태그는 선택지를 열고나서 태그 이외의 영역을 클릭하면 선택지가 닫힌다. 내가 아는 선에서는 이걸 구현하기 위해서 window 등 전역 레벨에 클릭 이벤트리스너를 달아서 처리해야했다. 그런데 이 방법이 마음에 들지 않았다. 프로젝트가 커지면 전역에 클릭 이벤트 리스너를 다는게 나중에 어떤 사이드 이펙트를 불러올지 모르기 때문이었다. 그래서 찾다보니 tabIndex라는 개념을 알게 되었다.

 

mdn에서는 "tabIndex는 요소가 포커스 가능함을 나타낸다"라고 설명한다. select 태그가 클릭되면 요소가 포커스되면서 focus 이벤트가 발생한다. 그리고 다른 곳을 클릭하면 그 포커스를 잃어버리는 blur 이벤트가 발생한다. 이런일은 기본적으로 input 태그처럼 상호작용이 일어나는 태그에만 발생한다. 그런데 tabIndex를 활용하면 그렇지 않은 div 태그도 포커스되도록 설정할 수 있는 것이다. 즉 원래 그렇지 않던 div 태그에도 focus 이벤트와, blur 이벤트가 발생하도록 설정할 수 있다.

 

정리하면, select 태그를 흉내낸 div 태그에 tabIndex="0"으로 속성을 부여하고 blur 이벤트리스너에 열렸던 선택지를 닫아주는 콜백함수를 달아주면 원했던 동작을 깔끔하게 처리할 수 있다.