Prevent closing after click on Dropdown.Item in React-bootstrap

Question

When I click on Dropdown.Item, Dropdown.Menu hides. I want to prevent this, i.e. leave Dropdown.Menu open after a click, and close it only if there was a click outside of Dropdown at all. I've found similar questions, but there were in original bootstrap using jQuery. How to implement this in react-bootstrap? Thanks

////
<Dropdown.Menu>
    <Dropdown.Item>- Pending</Dropdown.Item>
    <Dropdown.Item>- Completed</Dropdown.Item>
    <Dropdown.Item>- Cancelled</Dropdown.Item>
</Dropdown.Menu>
////

I just went with react-select and set closeMenuOnSelect={false} — GorgeousPuree
– GorgeousPuree, Commented Aug 17, 2020 at 15:49

KreepN · Accepted Answer · 2024-02-07 19:16:50Z

7

Add autoClose="inside" to the Dropdown component.

By default, the dropdown menu is closed when selecting a menu item or clicking outside of the dropdown menu. This behavior can be changed by using the autoClose property.

By default, autoClose is set to the default value true and behaves like expected. By choosing false, the dropdown menu can only be toggled by clicking on the dropdown button. the inside makes the dropdown disappear only by choosing a menu item and the outside closes the dropdown menu only by clicking outside.

https://react-bootstrap.github.io/docs/components/dropdowns

edited Feb 7, 2024 at 19:16

KreepN

8,5981 gold badge43 silver badges58 bronze badges

answered Feb 14, 2022 at 20:40

Bilal Faiz

4394 silver badges7 bronze badges

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

1 Comment

EJoshuaS - Stand with Ukraine Over a year ago

Using this attribute was the right idea for me, but I had to set it to autoClose="outside" instead.

Eran Zilberberg · Accepted Answer · 2021-07-12 13:17:03Z

4

Try this:

const [isShown, setIsShown] = useState(false);

const onToggleHandler = (isOpen, e, metadata) => {
    if  (metadata.source != 'select') {
        setIsOpen(isOpen);
    }
}

<Dropdown 
  show={isShown}
  onToggle={(isOpen, e, metadata) => onToggleHandler(isOpen, e, metadata)}
>

*onSelect method can be used normally

answered Jul 12, 2021 at 13:17

Eran Zilberberg

411 bronze badge

Comments

Nibin Benjamin · Accepted Answer · 2020-11-03 14:42:58Z

2

You can make use of show prop of Dropdown. Using this you can manually hide and show the dropdown.

So what i did is i added dropdown props state variable to the Dropdown element and then using onToggle function i hide and show dropdown on particular conditions.

<Dropdown {...this.state.dropdownProps} onToggle={(isOpen, event) => this.onToggleFunction(isOpen, event)} />

answered Nov 3, 2020 at 14:42

Nibin Benjamin

2502 silver badges6 bronze badges

Comments

Daniel Don · Accepted Answer · 2021-07-14 11:52:58Z

1

For functional components, simply create the state:

const [ show, setShow ] = useState(false);

Then write your dropdown component like this:

<Dropdown show = {show}>
    <Dropdown.Toggle onClick = {() => setShow(!show)}>Toggle Trigger.</Dropdown.Toggle>
</Dropdown>

edited Jul 14, 2021 at 11:52

answered Jul 14, 2021 at 11:26

Daniel Don

3791 gold badge4 silver badges12 bronze badges

Collectives™ on Stack Overflow

Prevent closing after click on Dropdown.Item in React-bootstrap

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related