reactjsdropdownbootstrap-5togglereactstrap

How can I make manual closed dropdown in Reactstrap?


Im using dropdown in reactstrap. This dropdown is closed whereever i click. But i want to close my dropdown just click dropdown toggle.

<Dropdown isOpen={dropdownOpen} toggle={toggleDropdown}>
      <DropdownToggle caret>
        <strong>Licensing</strong>
      </DropdownToggle>
      <DropdownMenu>
        <DropdownItem href="/g1"><strong>G1 License</strong></DropdownItem>
        <DropdownItem divider />
        <DropdownItem href="/g2"><strong>G2 License</strong></DropdownItem>
        <DropdownItem divider />
        <DropdownItem href="/g3"><strong>G License</strong></DropdownItem>
      </DropdownMenu>
    </Dropdown>

I try from bootstrap code just like

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

but it didnt work.


Solution

  • Find in The doc in DropdownMenu => props

    updated...

    const [dropdownOpen, setDropdownOpen] = useState(false);
    
      const reactiveToogle = (isOpen) => {
       if(isOpen){
        setDropdownOpen(false)
       }
      } ;
    
      return (
        <div className="d-flex p-5">
          <Dropdown isOpen={dropdownOpen} 
            toggle={() => setDropdownOpen(true)} 
            onClick={()=> reactiveToogle(dropdownOpen)} 
            direction={"end"}>
            <DropdownToggle caret>Dropdown</DropdownToggle>
            <DropdownMenu >
              <DropdownItem header>Header</DropdownItem>
              <DropdownItem>Some Action</DropdownItem>
              <DropdownItem text>Dropdown Item Text</DropdownItem>
              <DropdownItem disabled>Action (disabled)</DropdownItem>
              <DropdownItem divider />
              <DropdownItem>Foo Action</DropdownItem>
              <DropdownItem>Bar Action</DropdownItem>
              <DropdownItem>Quo Action</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
      );
    
    

    Link to playground test if that is you need

    The explain is simple in the toogle props only setState(true), and control the setState(false) only on click from element.

    You can set the same onClick props on any element can close it.