Can't close dropdown when clicking outside its container

[anjyakind]

I feel the dropdown should be able to close when clicking on another element, or outside its container.

[saini8686]

I have the same problem, how can we fix this?

[msubham193]

can i work on this issue @anjolaoluwaakindipe

[amamenko]

I managed to implement this behavior with a custom useClickOutside ref like this:

import { RefObject, useEffect } from "react";

export const useClickOutside = (ref: RefObject<any>, callback?: Function) => {
  useEffect(() => {
    const listener = (event: Event) => {
      if (!ref.current || ref.current?.contains(event.target)) return;
      if (callback) callback(event);
    };

    document.addEventListener("mousedown", listener);
    document.addEventListener("touchstart", listener);

    return () => {
      document.removeEventListener("mousedown", listener);
      document.removeEventListener("touchstart", listener);
    };
  }, [ref, callback]);
};

Then I set two refs, one on the Dropdown component itself (to manipulate the Dropdown component programmatically) and one on a wrapper div to keep track of outside click events. I then used the useClickOutside hook to listen to click events outside of the wrapper div and fired off a callback function that sets the isOpen state of the Dropdown component to false:

import Dropdown from "react-dropdown";
import { useRef } from "react";
import { useClickOutside } from "@/hooks/useClickOutside";
import "react-dropdown/style.css";

export const SomeComponent = () => {
  const dropdownContainerRef = useRef(null);
  const dropdownRef = useRef<Dropdown>(null);

  useClickOutside(dropdownContainerRef, () => {
    const currentRef = dropdownRef.current;
    if (currentRef) {
      const dropdownState = currentRef.state as {
        selected: {
          label: string;
          value: string;
        };
        isOpen: boolean;
      };
      if (dropdownState.isOpen) {
        currentRef.setState({
          ...dropdownState,
          isOpen: false,
        });
      }
    }
  });

  return (
    <div ref={dropdownContainerRef}>
      <Dropdown
        ref={dropdownRef}
        options={options}
        onChange={({ value }) => handleToggleCollapse(value)}
        value={options.find((option) => option.value === currentCollapseId)}
        placeholder="Select an option"
      />
    </div>
  );
};