커스텀 셀렉트 TIL

2023.08.18

오늘의 회고

커스텀 셀렉트

onBlur

커스텀 셀렉트를 클릭하면 선택영역이 열린다.

<div onClick={() => setIsOpen((prev) => !prev)}></div>

외부 영역을 누르면 선택영역이 닫히게 하기 위해서 onBlue를 추가했다.

blur 이벤트는 포커스를 잃을 때 발생합니다.

<div onBlur={() => setIsOpen(false)} onClick={() => setIsOpen((prev) => !prev)}></div>

문제

onBlur를 추가했지만 외부 영역을 눌러도 선택영역이 닫히지 않았다. 문제를 검색해보았다. 이유는 <div>태그는 포커싱을 지원하지 않는다는 점. 이를 보완하기 위해 tabindex 속성을 사용했다.

tabindex 속성이 있는 요소는 종류와 상관없이 포커스가 가능합니다.

<div onBlur={() => setIsOpen(false)} onClick={() => setIsOpen((prev) => !prev)} tabIndex={0}></div>