이슈
Dropdown 컴포넌트 내부의 아이콘을 클릭하면 토글 이벤트가 작동하지 않는 이슈
정확히는 토글이 발생하지 않는 것이 아니라
Toggle 이 발생하고 ClickOutSide 이벤트가 발생해 바로 닫혀버리는 것이다코드에서 원인 발견하기
const handleClickToggle = () => { if (disabled) return; setIsOpen((prev) => !prev); };
const handleClickOutSide = React.useCallback( (e: MouseEvent) => { if (isOpen && !ref.current?.contains(e.target as HTMLElement)) { setIsOpen(false); } }, [isOpen], ); React.useEffect(() => { document.addEventListener('click', handleClickOutSide); return () => { document.removeEventListener('click', handleClickOutSide); }; }, [handleClickOutSide]);
Toggle 핸들러가 먼저 실행되고 ClickOutSide 핸들러가 실행된다이벤트 타깃은 두 군데 모두 콘솔을 통해 확인이 가능했지만 한 가지 다른 점이 있다
ref.current?.contains(e.target as HTMLElement)ref에서 이벤트 타깃을
ClickOutSide 핸들러에서 찾지 못했다그래서 이러한 이슈가 발생하게 된 것이다
이에 대한 정확한 이유를 모르겠다
해결 방법
React.useEffect(() => { document.addEventListener('click', handleClickOutSide, true); return () => { document.removeEventListener('click', handleClickOutSide, true); }; }, [handleClickOutSide]);
Toggle 핸들러에서 먼저 캡처를 하기 때문인가? 라는 의문에서 시작해서 ClickOutSide 에서 캡처링 단계에서 타깃을 발견할 수 있도록 했더니 해결되긴 하였다결론
이벤트 캡처링, 버블링 단계의 개념을 통해 해결은 되었으나 올바른 방법인지 그리고 정확한 원인이 무엇인지 파악하지 못해 조금 더 알아보아야 한다
