Angular dropdown disappearing

Question

I'm using Angular 5.1.2 + Bootstrap 3.3.7 + ngx-bootstrap 2.0.0-rc.0. I'm trying to create a dropdown Login Page.

  <ul class="nav navbar-right">
        <li class="dropdown" dropdown>
          <a href="#" dropdownToggle class="dropdown-toggle" data-toggle="dropdown">
            <img src="assets/images/login_logo.png" alt="" class="img-responsive">
            </a>

          <!-- Dropdown Form -->
          <ul *dropdownMenu class="dropdown-menu" role="menu">
            <form class="form-group" action="index.html" method="post">
              <input class="form-control form-control-sm" type="text" placeholder="Enter your name">
              <input class="form-control form-control-lg" type="text" placeholder="Enter your name">
            </form>
          </ul>

The dropdown is working fine, but the problem is that when we click on the content of drop down( i.e input field in this case), the dropdown gets disappear. This is because when we click on it, a call is send back to the bootstrap to close it, and it is the expected behaviour. To prevent the call going back, we have to use jQuery function:

$('.dropdown-menu input').click(function(e) {
        e.stopPropagation(); //This will prevent the event from bubbling up and close the dropdown when you type/click on text boxes.
    });

However, i don't want to use jQuery with Angular. Is there any other solution available?

you can take a look at this [answer](https://stackoverflow.com/questions/46371276/nav-menu-dropdown-is-not-working-angular4-bootstrap-3/46501477#46501477) might help you — Rahul Singh, Jan 01 '18 at 14:42
You can set `[autoClose]="false"` for your `dropdown` element (see [the ngx-bootstrap documentation](https://valor-software.com/ngx-bootstrap/#/dropdowns)). — ConnorsFan, Jan 01 '18 at 14:43

score 0 · Answer 1 · answered Jan 25 '19 at 17:42

Try this:

<input ... onclick="(event||window.event).stopPropagation()">

(event||window.event) is for IE compatibility-- in IE, event will be undefined so window.event is used instead instead. If you need it to work on IE8 or earlier, you'll want to add something to use cancelBubble if stopPropagation isn't available.

See How to stop event propagation with inline onclick attribute? for related details

Angular dropdown disappearing

1 Answers1