React-bootstrap, how to close Dropdown

Question

I am using DropdownButton from react-bootstrap to create a dropdown with custom content. In the content the user can select various options and the click a button inside the dropdown to submit the selected options.

The problem I am facing is that I am unable to close the dropdown when the user clicks the submit button.

This is my code:

<DropdownButton
  title={ name }
  variant="outline-secondary"
  onToggle={ this.handleDropdownToggle }
>
  <div className="body">
    { this.renderOptions(options) }
  </div>
  <div className="filter-submit">
    <Button variant="primary" onClick={ this.onSubmit }>
      Accept
    </Button>
  </div>
</DropdownButton>

If I use the Dropdown element with Dropdown.Toggle Dropdown.menu and the show property, I can control the visibility, but it disables the ability to close the dropdown when clicking outside it.

This might be related: https://stackoverflow.com/questions/18855132/close-bootstrap-dropdown-after-link-click — g_bor, Sep 24 '19 at 08:29

Alex Ross · Answer 1 · 2020-03-03T16:00:13.770

You can accomplish this with a simple state change triggered by an onClick event.

Within your react component do something like this:

state = {
    showDropdown: false
}

toggleDropdown = () => {
    if (this.state.showDropdown) {
        this.setState({ showDropdown: false });
    } else {
        this.setState({ showDropdown: true });
    }
}

On your dropdown component add an onClick to trigger this state change on any item you want to have open or close the dropdown menu. Make your life easy with the onBlur trigger to trigger close if you click anywhere outside the opened dropdown:

<DropdownButton
  title={ name }
  variant="outline-secondary"
  onClick={() => this.toggleDropdown()}
  onBlur={() => this.toggleDropdown()}
>
  <Dropdown.Item href="#/action-1" onClick={() => this.toggleDropdown()}>Action</Dropdown.Item>
  <Dropdown.Item href="#/action-2" onClick={() => this.toggleDropdown()}>Another action</Dropdown.Item>
  <Dropdown.Item href="#/action-3" onClick={() => this.toggleDropdown()}>Something else</Dropdown.Item>
</DropdownButton>

score 0 · Answer 2 · answered Dec 08 '21 at 15:51

This code works well,

class DropdownFixed extends Component {
  state = { dropdownIsOpen: false }

  toggleDropdown = () => this.setState({ dropdownIsOpen: !this.state.dropdownIsOpen })

  render {
    return (
      <DropdownButton
        onToggle={toggleDropdown}
        open={dropdownIsOpen}
      >
        <MenuItem onClick={toggleDropdown}>Click me!</MenuItem>
      </DropdownButton>
    )
  }
}

Hemant Kumar · Answer 3 · 2023-04-13T12:30:32.040

I have implemented react bootstrap in functional component as below, it creates a dropdown with list items and ellipses to toggle it on/off:

import React, { useRef, useState } from 'react';
import { Dropdown } from 'react-bootstrap';

const yourfunctionalcomp = (props) => {
const [showDropdown, setShowDropdown] = useState(false);
const setDropdown = () => {
    setShowDropdown(!showDropdown)
}

return (
.....
<Dropdown show={showDropdown} onToggle={setDropdown}>
<Dropdown.Toggle onClick={setDropdown}>
<i className="fa fa-ellipsis-v"/>
</Dropdown.Toggle>
<Dropdown.Menu>
<li key={"firstkey"}>first menu</li>
<li key={"secondkey"}>second menu</li>
</Dropdown.Menu>
</Dropdown>
.....
)
}

I think it should be `show={showDropdown}` instead of `open=` and the closing `` is missing a `/` — jost21, Mar 31 '23 at 16:16

React-bootstrap, how to close Dropdown

3 Answers3