Как сделать закрытие списка по клику вне блока?

Question

[Сергей]

Доброго дня!

Есть компонент Dropdown.
Необходимо закрывать открытый список по нажатию вне блока.

const Dropdown: FC<DropdownType> = ({
  options,
  onClick,
  title,
}): JSX.Element => {
  const [isOpen, setOpen] = useState<boolean>(false);
  const [activeOption, setActiveOption] = useState<DropdownOptionType>(
    options.find((opt) => opt.default) || options[0],
  );

  const toggling = useCallback(() => setOpen(!isOpen), [isOpen]);

  useEffect(() => {
    const { slug } = activeOption;
    onClick(slug);
  }, [onClick, activeOption]);

  const onOptionClicked = useCallback(
    (option: DropdownOptionType) => {
      setActiveOption(option);
      toggling();
    },
    [toggling],
  );

  return (
    <div className={cn('dropdown')}>
      {title && <p className={cn('title')}>{title}</p>}
      <DropdownToggle
        isOpen={isOpen}
        onClick={toggling}
        option={activeOption}
      />
      {isOpen && (
        <DropdownList
          activeOption={activeOption}
          onOptionClicked={onOptionClicked}
          options={options}
        />
      )}
    </div>
  );
};

Как лучше это сделать?

Answer 1

[ParaBellum577]

Вот подобное решение

Либо что-то в таком духе

handleClickOutside(event) {
        if (myRef && !myRef.current.contains(event.target)) {
            alert('You clicked outside of me!');
        }
    }

Comments

[Сергей]

Спасибо! Ссылка с хуком что нужно)

Answer 2

[Игнат Ломков]

Не стоить писать велосипед, уже все придумали за тебя. Вот неплохой инструмент для данного отслеживания от Material UI

Comments

[Сергей]

ты предлагаешь ради этого завозить целую либу material-ui?

[Игнат Ломков]

Там либа только с утилитами идет. Сам материал, иконки, стили идут отдельно