CODEWITHSUNDEEP
reactjsbootstrap-4drop-down-menureactstrap
AG_HIHI
AG_HIHI

Reputation: 1995

Reactstrap: Prevent closing drop down menu when an item is selected

One DropdownItem contains a search Input so when the user clicks on it, I need the drop down menu to remain open so that he types what he needs to search:

import React, { Component } from "react";
import { connect } from "react-redux";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
} from "reactstrap";
import SearchBar from "./SearchBar";

export class AddToCollectionButton extends Component {
  constructor(props) {
    super(props);

    this.state = {
      dropdownOpen: false,
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState({ dropdownOpen: !this.state.dropdownOpen });
  }

  render() {
    return (
      <Dropdown
        isOpen={this.state.dropdownOpen}
        toggle={this.toggle}
        // color="default"
        className="div-inline float-right ml-1"
        direction="left"
      >
        <DropdownToggle
          tag="span"
          onClick={this.toggle}
          data-toggle="dropdown"
          aria-expanded={this.state.dropdownOpen}
          color="danger"
        >
          <span className="badge badge-danger cursor-pointer-no-color">
            <i class="fa fa-plus" aria-hidden="true" />{" "}
          </span>
        </DropdownToggle>
        <DropdownMenu className="dropdown-danger scrollable-drop-down-menu">
          <DropdownItem
          
            onClick={(e) => {
              // e.preventDefault();
              // e.stopPropagation();
              // this.setState({
              //   dropdownOpen: true,
              // });
            }}
          >
            <SearchBar />
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
    );
  }
}

const mapStateToProps = (state) => ({});

const mapDispatchToProps = {};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(AddToCollectionButton);

I tried different things as you can see inside the onClick and other things mentioned on similar questions on SO but nothing worked.

Upvotes: 3

Views: 1271

Answers (3)

Rohit Khandelwal
Rohit Khandelwal

Reputation: 632

You can try adding stopPropagation on the click of <SearchBar /> elements input or div. This should prevent the click event from getting triggered on parent elements on click of the <SearchBar /> elements.

Upvotes: 0

Zahnstochermann
Zahnstochermann

Reputation: 101

The DropdownItem has a boolean prop "toggle" which defaults to true. If set to false, the menu stays open after selecting an element.

<DropdownItem toggle={false} >
  <SearchBar />
</DropdownItem>

Documentation: https://6-4-0--reactstrap.netlify.app/components/dropdowns/

Upvotes: 1

Andr&#233;
Andr&#233;

Reputation: 2024

Not sure if this there's an option in reactstrap, or if you can use React Bootstrap.
You can add autoClose={false} in your Dropdown and it will only be closed when clicked again in the Dropdown icon.

Upvotes: 1

Related Questions