Outside event | Notion

Dropdown, Overflow Menu, Select 등 외부를 클릭할 때 모달을 없애줘야할 때가 있다.

바깥 버튼을 누르면 동시 2개의 이베트가 처리되어야하는데 여간 머리가 아프다..

해결책

1번

ref을 사용해서 이벤트를 심어주자

2번

onFocus, onBlur를 활용하자

div에 focus할 수 있게 tabIndex 설정을 해줘야 한다.

export function DropDown({ options, callback }) {
		const [selected, setSelected] = useState("");
    const [expanded, setExpanded] = useState(false);

    function expand() {
        setExpanded(true);
    }

    function close() {
        setExpanded(false);
    }

    function select(event) {
        const value = event.target.textContent;
        callback(value);
        close();
        setSelected(value);
    }

    return (
        <div tabIndex={0} onFocus={expand} onBlur={close} >
            <div>{selected}</div>
            {expanded && (
                <div>
                    {options.map((O) => (
                        <div onClick={select}>
                            {O}
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
}

장점

별도로 eventLisener를 설정할 필요가 없다.

단점

div에 blur되면 창이 꺼진다. 즉, 모달에서 추가 작업을 하기 힘들다.

결론

dropdown을 만들 때 최고.

참고