How can I make manual closed dropdown in Reactstrap?

59 Views Asked by At

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.

1

There are 1 best solutions below

2
On BEST ANSWER

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.