David Rojo
David Rojo

Reputation: 2394

React-bootstrap, how to close Dropdown

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.

Upvotes: 3

Views: 11245

Answers (3)

Hemant Kumar
Hemant Kumar

Reputation: 161

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>
.....
)
}

Upvotes: 0

HC0215
HC0215

Reputation: 519

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>
    )
  }
}

Upvotes: 0

Alex Ross
Alex Ross

Reputation: 76

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>

Upvotes: 3

Related Questions