Reactjs – React Tailwind Muliple Headless UI Dropdown Menus(Typescript)

To achieve the desired behavior of switching between Headless UI dropdown menus in a single click, you can manage the open state of the dropdown menus at a higher level. This approach involves keeping track of which dropdown is currently open and ensuring that opening a new dropdown automatically closes the previously open one. Here’s a general approach to implement this:

Manage the open state at a higher level: Create a state variable to track the currently open dropdown.
Update the state when a dropdown is clicked: When a dropdown is clicked, update the state to the new dropdown.
Close the previous dropdown: Ensure that clicking a new dropdown closes the previously open dropdown.

Here is an example implementation using React:

import { useState } from 'react';
import { Menu } from '@headlessui/react';

const Dropdown = ({ id, currentOpenId, setOpenId }) => {
  const isOpen = currentOpenId === id;

  return (
    <Menu>
      <div>
        <Menu.Button onClick={() => setOpenId(isOpen ? null : id)}>
          Options
        </Menu.Button>
      </div>
      {isOpen && (
        <Menu.Items>
          <Menu.Item>
            {({ active }) => (
              <a
                className={`${active ? 'bg-blue-500 text-white' : 'text-black'}`}
                href="/account-settings"
              >
                Account settings
              </a>
            )}
          </Menu.Item>
          <Menu.Item>
            {({ active }) => (
              <a
                className={`${active ? 'bg-blue-500 text-white' : 'text-black'}`}
                href="/logout"
              >
                Logout
              </a>
            )}
          </Menu.Item>
        </Menu.Items>
      )}
    </Menu>
  );
};

const DropdownContainer = () => {
  const [currentOpenId, setCurrentOpenId] = useState(null);

  return (
    <div>
      <Dropdown id="dropdown1" currentOpenId={currentOpenId} setOpenId={setCurrentOpenId} />
      <Dropdown id="dropdown2" currentOpenId={currentOpenId} setOpenId={setCurrentOpenId} />
      <Dropdown id="dropdown3" currentOpenId={currentOpenId} setOpenId={setCurrentOpenId} />
    </div>
  );
};

export default DropdownContainer;

Explanation
Dropdown Component:

The Dropdown component takes three props: id, currentOpenId, and setOpenId.
id is a unique identifier for each dropdown.
currentOpenId is the state that tracks which dropdown is currently open.
setOpenId is the function to update the currentOpenId state.
DropdownContainer Component:

The DropdownContainer component maintains the currentOpenId state.
It renders multiple Dropdown components, each with a unique id.
Clicking on a Menu.Button updates the currentOpenId state. If the clicked dropdown is already open, it sets currentOpenId to null, closing the dropdown. Otherwise, it sets currentOpenId to the clicked dropdown’s id, opening it and closing any previously open dropdown.