title: Bootstrap 4 prevent dropdown from closing when clicking inside it
body: <p>I have a form inside a dropdown. When I click on an input in the form the dropdown menu closes. Is there a way I can prevent this?</p>
  
  <p>The code looks like this:</p>
  
  <pre><code>    &lt;li class="nav-item dropdown"&gt;
          &lt;a id="loginLink" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Log in&lt;/a&gt;
          &lt;div id="loginModal" class="dropdown-menu dropdown-menu-right" role="dialog"&gt;
              &lt;form class="dropdown-item" novalidate name="f1" ng-submit="login()"&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;div class="alert alert-danger" role="alert" ng-show="(error.length &gt; 1)"&gt;
                          {{error}}
                      &lt;/div&gt;
                      &lt;div class="input-group"&gt;
                          &lt;span class="input-group-addon" id="login-email-addon"&gt;Username:&lt;/span&gt;
                          &lt;input type="text" ng-model="userLoginEmail" class="form-control" placeholder="username" aria-describedby="login-email-addon" required&gt;
                      &lt;/div&gt;
                      &lt;div class="input-group"&gt;
                          &lt;span class="input-group-addon" id="login-pass-addon"&gt;Password:&lt;/span&gt;
                          &lt;input type="password" class="form-control" ng-model="userLoginPassword" placeholder="password" aria-describedby="login-pass-addon" required&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;input type="submit" class="btn btn-primary" value="Log in" required /&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  </code></pre>
  
  <p>I tried stopping it using this:</p>
  
  <pre><code>$(document).ready(function () {
      $(document).on('click', '.dropdown-item', function (e) {
          e.stopPropagation();
      });
  });
  </code></pre>
  
  <p>But that doesn't seem to stop it. In fact when the method runs, the menu is already closed</p>