Method to close dropdown menu after item click?

[cmdcolin]

Sorry if this has already been answered before but I didn't see any examples on the doc page for this!

I imagine it might vary depending on method used, but if there are any examples it would be great

[saadeghi]

For details/summary method
From docs:

You can also open/close it using JS by adding/removing the open attribute

For popover method there's hidePopover()

For CSS focus method
From docs:

To close the dropdown after click, you can use something like onclick="document.activeElement.blur()" Example

[cmdcolin]

thanks for posting, my reading comprehension is bad.

I ruled out the popover method for now because of the browser compatibility

I tried toggling the 'open' attribute on details with react + useState, but it had a confusing behavior where it doesn't really work...the first click does nothing, then subsequent clicks do work. not sure what the deal is, maybe i gotta do some more debugging

my code

function App() {
  const [open, setOpen] = useState(false);

  return (
    <details className="dropdown" open={open}>
      <summary className="btn m-1" onClick={() => setOpen(!open)}>open or close</summary>
      <ul className="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
        <li>
          <a>Item 1</a>
        </li>
        <li>
          <a>Item 2</a>
        </li>
      </ul>
    </details>
  );
}

[cmdcolin]

I found a fix for my above question: there are methods posted here for controlling the open state of a details panel https://stackoverflow.com/a/76884775/2129219