Stop just one dropdown toggle from closing on click

user_517477 0
Viewed 56841

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 soon as you click on it (but it does close if you click outside of it).

I created a jsfiddle: http://jsfiddle.net/denislexic/8afrw/2/

And here is the code, it's basic:

<div class="btn-group" style="margin-left:20px;">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
      <li>Email<input type="text" place-holder="Type here" /></li>
      <li>Password<input type="text" place-holder="Type here" /></li>
  </ul>
</div>​

So basically, I want it to not close on click of the dropdown (but close on click of the action button or outside the dropdown). My best guess so far was to add a class to it and try to do some JS, but I couldn't figure it out.

Thanks for any help.

twitter-bootstrap drop-down-menu javascript
7 Answers

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.

user_30089710
Related