How to use Multi-Select Dropdown in react-bootstrap

Question

I am using react-bootstrap library. This library having a module called DropdownButton. So i am able to display data in dropdown. This is single selection data.

  <DropdownButton
            bsStyle="success"
            title={this.state.addLeadStageSelectTitle}
            key={"addleadstageDropDown"}
            id={"addleadstageIDAdd"}
            onSelect={this.handleSelectLeadStageAdd}
            >
                {this.state.vtx_sales_lead_status.map(objs => {
                   return (
                     <MenuItem eventKey={objs.id}>{objs.name}</MenuItem>
                  )

                }
                  )}
          </DropdownButton>

But I am trying to create it multiselect with same library.

yeoman · Accepted Answer · 2021-03-04 22:51:32Z

9

Here is a multi-select example using hooks and react-bootstrap.

import React, { useState } from "react";
import { Col, Form } from "react-bootstrap";

export default function App() {
  const [field, setField] = useState([]);

  return (
    <Form.Group as={Col} controlId="my_multiselect_field">
      <Form.Label>My multiselect</Form.Label>
      <Form.Control as="select" multiple value={field} onChange={e => setField([].slice.call(e.target.selectedOptions).map(item => item.value))}>
        <option value="field1">Field 1</option>
        <option value="field2">Field 2</option>
        <option value="field3">Field 3</option>
      </Form.Control>
    </Form.Group>
  );
}

answered Mar 4, 2021 at 22:51

yeoman

4074 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

light24bulbs Over a year ago

What about the dropdown?

Oner T. Over a year ago

This is not a dropdown

yeoman Over a year ago

This example is a multi-select without a dropdown. If you want the dropdown version, see the response from Jordan Enev.

Jordan Enev · Accepted Answer · 2019-02-07 14:05:43Z

7

I've checked the react-bootstrap documentation and it looks like there isn't a multiselect functionality.

So you can use a third party library, like: react-bootstrap-multiselect.

It's a Multiselect component for React (with Bootstrap). This is a React wrapper around an existing jQuery / Bootstrap library: bootstrap-multiselect

Basic usage:

import Multiselect from 'react-bootstrap-multiselect'

const data = [{ value:'One', selected:true }, { value: 'Two' }, { value:'Three' }]

const App = props => {
  return <Multiselect onChange={props.handleChange} data={data} multiple />
}

Demo.

edited Feb 7, 2019 at 14:05

answered Feb 7, 2019 at 13:50

Jordan Enev

18.8k3 gold badges45 silver badges68 bronze badges

Comments

ag0x · Accepted Answer · 2023-04-24 06:39:10Z

6

It is supported now:

import { Form } from 'react-bootstrap';

// [........]

<Form>
  <Form.Control as="select" multiple value={options} onChange={onSelectedOptionsChange}>
    {options.map(option => (
      <option key={option.name} value={option.value}>
        {option.name}   
      </option>
    ))}  
  </Form.Control>
</Form>

edited Apr 24, 2023 at 6:39

ag0x

33 bronze badges

answered Feb 6, 2020 at 9:47

Knut Holm

4,1604 gold badges36 silver badges56 bronze badges

2 Comments

JoeDuncko Over a year ago

This seems to be for a multiselect without any dropdown support.

Pieter Meiresone Over a year ago

Note that the selected options are in e.target.selectedOptions and not in e.target.value.

Jonno_FTW · Accepted Answer · 2024-05-08 06:07:21Z

Here a multi select with checkbox at the side of the options:

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

const MultiSelectDropdown = () => {
  const [selectedOptions, setSelectedOptions] = useState([]);
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef(null);
  useEffect(() => {
    const handleClickOutside = (event) => {
        if (dropdownRef.current && 
              !dropdownRef.current.contains(event.target)) {
            setIsOpen(false);
        }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
        document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);
  const options = [
    { id: 1, label: 'Option 1' },
    { id: 2, label: 'Option 2' },
    { id: 3, label: 'Option 3' },
    { id: 4, label: 'Option 4' },
    { id: 5, label: 'Option 5' }
  ];

  const toggleDropdown = () => {
    setIsOpen(!isOpen);
  };

  const handleOptionChange = (event) => {
    const optionId = parseInt(event.target.value);
    const isChecked = event.target.checked;

    if (isChecked) {
      setSelectedOptions([...selectedOptions, optionId]);
    } else {
      setSelectedOptions(selectedOptions.filter((id) => id !== optionId));
    }
  };

  return (
    <div  ref={dropdownRef} className={`dropdown ${isOpen ? 'show' : ''}`}>
      <button
        style={{width:"20%"}}
        className="btn btn-secondary dropdown-toggle"
        type="button"
        id="multiSelectDropdown"
        onClick={toggleDropdown}
      >
        Select Options
      </button>
      <div style={{width:"20%"}} className={`dropdown-menu ${isOpen ? 'show' : ''}`} aria-labelledby="multiSelectDropdown">
        {options.map((option) => (
          <Form.Check
          style={{marginLeft:"10%"}}
            key={option.id}
            type="checkbox"
            id={`option_${option.id}`}
            label={option.label}
            checked={selectedOptions.includes(option.id)}
            onChange={handleOptionChange}
            value={option.id}
          />
        ))}
      </div>
      {JSON.stringify(selectedOptions)}
    </div>
  );
};

export default MultiSelectDropdown;

Collectives™ on Stack Overflow

How to use Multi-Select Dropdown in react-bootstrap

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related