[React] react-datepicker 달력 외부 클릭시 이벤트 전달 막는 방법

 

01. 문제

2일동안 찾아보던 버그…

 

회사 프로젝트에서 react-datepicker를 사용해서 달력을 만들었다. 그런데 달력을 닫으려고 배경을 클릭했을 때, 달력이 닫히고 이벤트가 종료되어야 하는데. 클릭한 위치에 버튼이나 어떤 이벤트가 달린 컴포넌트가 있으면 그 이벤트가 실행되었다.

 

리액트 강의를 들으며 실습하고 있던 프로젝트를 연습장 삼아 달력을 다시 만들어봤다. 달력 외부에 주문하기 버튼을 클릭했을 때 버튼 이벤트가 발생하였다. 

 

ProductItem에 있는 버튼 이벤트가 실행되는 것을 로그를 통해 확인할 수 있었다.

 

02. 해결과정

DatePicker에 있는 onClickOutside에 버블링을 중단하는 코드를 넣어줬다. -> (X) 해결되지 않음

    <CalendarWrapper>
      {/* {isOpen && <Overlay id="wldnjs" onClick={handleOverlayClick} />} */}
      <DatePicker
        selected={startDate}
        onChange={(date) => {
          console.log("111");
          setStartDate(date);
          setIsOpen(false);
        }}
        onCalendarOpen={() => {
          console.log("222");
        }}
        onCalendarClose={() => {
          console.log("333");
          setIsOpen(false);
        }}
        onClickOutside={(e) => {
          console.log("444");
          e.stopPropagation();
        }}
        withPortal
      />
    </CalendarWrapper>

 

DOM요소에 직접 접근하여 CalendarWrapper 내부에 event.target이 포함되어 있지 않는 경우 event.stopPropagation(); 으로 버블링을 중단하는 코드를 넣어줬다. -> (X) 해결되지 않음

  const calendarRef = useRef(null);
  
  useEffect(() => {
    const handleClickOutside = (event) => {
      console.log("handleClickOutside");
      console.log(calendarRef.current);
      console.log(event.target);

      if (calendarRef.current && !calendarRef.current.contains(event.target)) {
        console.log(calendarRef.current.contains(event.target));
        event.stopPropagation();
        event.preventDefault();
        setIsOpen(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [calendarRef]);
  
    <CalendarWrapper ref={calendarRef}>
      <DatePicker
        selected={startDate}
        onChange={(date) => {
          console.log("111");
          setStartDate(date);
          setIsOpen(false);
        }}
        onCalendarOpen={() => {
          console.log("222");
        }}
        onCalendarClose={() => {
          console.log("333");
          setIsOpen(false);
        }}
        onClickOutside={(e) => {
          console.log("444");
        }}
        withPortal
      />
    </CalendarWrapper>
  

 

03. 해결

react-datepicker 깃 레포지토리에서 한번 코드를 보면서 원인을 찾아보기로 했다.

Issues 탭이 있길래 이런 문제가 나만 발생하는건가 싶어서 검색을 해봤더니 같은 문제에 대한 내용이 올라와 있었다. !!

 

https://github.com/Hacker0x01/react-datepicker/issues/2524

여기에 해결 방법이 있었다. !!! 엉엉 감사합니다..

 

document.addEventListener("touchstart", handelTouchStart, true);로 touchstart 이벤트가 발생할 경우e.stopPropagation();으로 이벤트 버블링을 중단할 수 있도록 했다.

달력이 닫히면 이벤트 리스너를 제거한다. 달력을 닫을 때 리스너가 제거되지 않아 원치 않는 문제가 발생할 수 있기 때문이다. 다시 렌더링할 때 함수를 재정의하는 것을 방지하기 위해 removeEventListener로 이벤트리스너를 제거해줬다.

const Calendar = () => {
  const [startDate, setStartDate] = useState(new Date());

  const handelTouchStart = useCallback((e) => e.stopPropagation(), []);

  const hadleCalendarOpen = () => {
    console.log("open");
    document.addEventListener("touchstart", handelTouchStart, true);
  };

  const hadleCalendarClose = () => {
    console.log("close");
    document.removeEventListener("touchstart", handelTouchStart, true);
  };

  return (
    <CalendarWrapper>
      <DatePicker
        selected={startDate}
        onChange={(date) => {
          setStartDate(date);
        }}
        onCalendarOpen={hadleCalendarOpen}
        onCalendarClose={hadleCalendarClose}
        withPortal
      />
    </CalendarWrapper>
  );
};

 

더이상 버튼 이벤트가 발생하지 않는 것을 확인할 수 있다. !!