Angular UI Bootstrap - Form in a Dropdown toggling dropdown when clicked

Question

This form dropdown (using Angular UI) isn't working as intended. When clicking on inputs the dropdown disappears. Does anyone have a fix? Thanks!

<ul class="nav navbar-nav navbar-right pull-right">
                        <li class="dropdown" dropdown id="menuLogin">
                            <a href="#" class="dropdown-toggle" dropdown-toggle id="navLogin">Login</a>
                            <div class="dropdown-menu">
                                <form class="form form-group" id="formLogin" _lpchecked="1"> 
                                    <input name="username" id="username" type="text" class="form-control" placeholder="Username"> 
                                    <input name="password" id="password" type="password" class="form-control" placeholder="Password">
                                    <button type="button" id="btnLogin" class="btn btn-default">Login</button>
                                </form>
                            </div>
                        </li>
                        <!-- <li><a href="#">Log in</a></li> -->
                        <li><a href="#" class="cart" ui-sref="basket"><span class="glyphicon glyphicon-shopping-cart"></span><ngcart-badge></ngcart-badge></a></li>
                        <li><a href="#" class="search"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a></li>
                    </ul>

Dinosaur-Guy · Accepted Answer · 2016-07-21 08:06:49Z

1

You can prevent the toggle by adding

ng-click="$event.stopPropagation()"

to your div:

<div class="dropdown-menu" ng-click="$event.stopPropagation()">
                            <form class="form form-group" id="formLogin" _lpchecked="1"> 
                                <input name="username" id="username" type="text" class="form-control" placeholder="Username"> 
                                <input name="password" id="password" type="password" class="form-control" placeholder="Password">
                                <button type="button" id="btnLogin" class="btn btn-default">Login</button>
                            </form>
                        </div>

answered Jul 21, 2016 at 8:06

Dinosaur-Guy

1351 silver badge13 bronze badges

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

Collectives™ on Stack Overflow

Angular UI Bootstrap - Form in a Dropdown toggling dropdown when clicked

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related