Stop just one dropdown toggle from closing on click

Question

I have a button dropdown (just one, not all of them), and inside of it, I want to have several input field where people can type stuff inside without the dropdown hiding as

Answer 1

I had this issue but in a react component - the react component was in a bootstrap dropdown menu with a form. Every time an element inside the dropdown was clicked it would close, causing issues inputting anything in the form.

The usual e.preventDefault() and e.stopPropagation() would not work in the react app due to the jquery event being fired immediately and react trying to intervene after this.

The below code allowed me to fix my issue.

stopPropagation: function(e){
    e.nativeEvent.stopImmediatePropagation();
}

or in ES6 format

stopPropagation(e){
    e.nativeEvent.stopImmediatePropagation();
}

Hope this can be of use to anyone struggling with the other answers when trying to use it in react.