Change click behavior on Bootstrap3 dropdown button

Question

Can't figure out how to properly change the click behavior on Bootstrap 3 dropdown menus. I'm basically using the dropdown as an ad-hoc input where users can type a name and then submit. However, if they click on the input text field it closes the dropdown before anything can be typed.

The goal is to only programatically close the dropdown, although it still requires the data-toggle attribute which is persisting the standard behavior.

dropdown with text field

Here's the code for the dropdown:

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <i class="fa fa-flask icon-3x"></i>
  </button>
  <ul class="dropdown-menu heatmap-options" role="menu">
    <li><label>Formula </label><input type="text" placeholder="type a formula name"  /></li>
    <li class="divider"></li>
    <li><a href="javascript:;" class="btn btn-primary btn-sm">Create</a></li>
  </ul>
</div>

I'm not sure whether I need to do some Javascript intervention, restructure this entirely, or if there's some "option" I don't know about that I can use for this. Appreciate the help!

@alexw I migrated the project to React.js and found it solved many of my problems, and I approached this problem with a different solution. — crockpotveggies
– crockpotveggies, Commented Apr 10, 2016 at 2:01
Gotcha. I was thinking about frontend frameworks myself, but I've heard a lot about performance issues. — alexw
– alexw, Commented Apr 10, 2016 at 2:05
@alexw I've found zero issues with React.js with regards to performance and am quite pleased with it. It uses an in-memory DOM to calculate changes before updating the browser DOM. Quite handy. — crockpotveggies
– crockpotveggies, Commented Apr 10, 2016 at 2:08
Alright, I'll think about it. Actually, I had heard about performance issues with regard to Angular, not React. Seems like this warrants more research. — alexw
– alexw, Commented Apr 10, 2016 at 2:11

Karthikeyan · Accepted Answer · 2014-02-15 07:05:18Z

1

You have to add some scripts before the body tag as shown bellow.

 <!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>DropDown with Input Fields</title>
      <link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css">
      <link rel="stylesheet" href="assets/css/font-awesome.css" />
     </head>
     <body>
      <div class="btn-group">
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-flask icon-3x"></i></button>
        <ul class="dropdown-menu" role="menu">
          <li>
            <div class="input-group">
             <input type="text" class="form-control">
             <span class="input-group-btn">
             <button class="btn btn-default" type="button">Go!</button>
             </span>
            </div>      
         </li>
        </ul>
      </div>
     <script src="assets/js/jquery.js"></script>
     <script type="text/javascript" src="assets/js/bootstrap.js"></script>
     <script type="text/javascript">
      $('.dropdown-menu').on('click', function (e) {
       e.stopPropagation() 
      })
     </script>
     </body>  
    </html>

answered Feb 15, 2014 at 7:05

Karthikeyan

3233 silver badges7 bronze badges

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

1 Comment

Gcap Over a year ago

how can this be used without disabling 'confirm' dialog?

Collectives™ on Stack Overflow

Change click behavior on Bootstrap3 dropdown button

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related