[React] dropDown 이슈

Blur 이벤트 전에 Click 이벤트 실행하기

Dropdown 메뉴를 만들어 드롭다운 메뉴의 포커싱을 벗어나면 blur 이벤트를 주려고 하였는데
메뉴 리스트 클릭시 클릭이벤트를 처리 하기 전에 blur 이벤트가 먼저 실행되어 리스트 전체가 닫혀 버리는 문제가 발생하는 것이었다.

해결방법

버튼에 Mousedown 이벤트를 걸고 Mousedown 이벤트 발생시 preventDefault를 실행해 Blur 이벤트가 발생하지 않도록 처리하면 된다.

  const handleMouseDown = (e) => {
    e.preventDefault();
  };

<Item
   key={idx}
   onMouseDown={(e) => handleMouseDown(e)}
   onClick={() => onClickHandler(item)}
   active={onActive ? idx === onActive.value : null}
>
      <span>{item.label}</span>
</Item>

blur 이벤트가 일어나지 않을때

dropDown 메뉴가 화면에 나타났을때 포커스가 없는경우 다른 영역으로 벗어나도 Blur 이벤트가 일어나지 않는다.

해결방법

우선 드롭다운 컴포넌트를 useRef로 잡아놓고 dropToggle(props로 받은 boolean 타입)을 받아 true일 경우에 드롭다운 메뉴가 화면에 나타난다. 그때 드롭다운 useRef에 포커스를 준다.

useEffect(() => {
	if (dropToggle) {
		setOpen(true);
		dropDownRef.current?.focus();
	}
}, [dropToggle]);

<드롭다운 컴포넌트>

<SelectDropDownBox
	onBlur={onBlurHandler}
	tabIndex={0}
	ref={dropDownRef}
>
	...(생략)	
</SelectDropDownBox>