Dropdown cannot be opened again, if closed by clicking on the trigger button

[hademo]

Relevant code or config:

import React, { useState } from "react";
import { Dropdown, DropdownItem } from "@windmill/react-ui";

interface Props {}

const UserDropdown = (props: Props) => {
  const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);

  function handleProfileClick() {
    setIsProfileMenuOpen(!isProfileMenuOpen);
  }

  return (<div className="relative">
        <button
          className="rounded-full focus:shadow-outline-purple focus:outline-none"
          onClick={handleProfileClick}
          aria-label="Account"
          aria-haspopup="true"
        >
          Toggle
        </button>
        <Dropdown
          align="right"
          isOpen={isProfileMenuOpen}
          onClose={() => {
            setIsProfileMenuOpen(false);
          }}
        >
          <DropdownItem tag="a" href="#">
            User
          </DropdownItem>
          <DropdownItem tag="a" href="#">
            Settings
          </DropdownItem>
          <DropdownItem onClick={() => alert("Signout")}>
            Logout
          </DropdownItem>
        </Dropdown>
  </div>)
}

export default UserDropdown;

What you did:

Implemented a dropdown according to the full example of the documentation https://windmillui.com/react-ui/components/dropdown

What happened:

On first render, when user clicks on toggle button, then dropdown pops up. When user clicks the toggle button again, then the dropdown is closed. After the second click the dropdown cannot be opened again and remains closed.

[hademo]

Update

@estevanmaito when debouncing the onClose handler of the Dropdown component the issue is solved. e.g.

const _ = require("lodash");
...
 <Dropdown
        align="right"
        isOpen={isProfileMenuOpen}
        onClose={_.debounce(() => setIsProfileMenuOpen(false), 300)}
        // onClose={() => setIsProfileMenuOpen(false)}
      >
  .....
</Dropdown>

[arisferyanto]

@hademo It fixes the issue, but if you put a console.log in onClose, you could see that it's triggered multiple times and the number of calls keep growing as you click.

[awesomeunleashed]

Not sure why, but forcing the button to be re-mounted when changing isOpen seems to fix this issue. The easiest way to do this is setting a key prop on the button that changes with isOpen (I used key={isOpen.toString()}).

[zkhalapyan]

Have the same issue as well. Seems like there is a race condition between the dropdown's onClose and the toggle function in the demo.

[dcmalk]

@hademo Thanks for the debouncing fix. It did the trick for me as well. On another server, there's no need and the original code just works. Strange...

[chichicuervo]

@awesomeunleashed 's workaround worked for me, tho it still resulted in the same leak @arisferyanto refers to.. the debouncing trick did not work for me.

[fprackwieser]

same issue wasted 4h