title: When I click on dropdown-menu in bootstrap It opens and then close automatically
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      padding-top: 50px;
  }
  .dropdown.dropdown-lg .dropdown-menu {
      margin-top: -1px;
      padding: 6px 20px;
  }
  .input-group-btn .btn-group {
      display: flex !important;
  }
  .btn-group .btn {
      border-radius: 0;
      margin-left: -1px;
  }
  .btn-group .btn:last-child {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
  }
  .form-horizontal .btn[type="submit"] {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .form-horizontal .form-group {
      margin-left: 0;
      margin-right: 0;
  }
  .form-group .form-control:last-child {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
  }
  
  @media screen and (min-width: 768px) {
      #adv-search {
          width: 500px;
          margin: 0 auto;
      }
      .dropdown.dropdown-lg {
          position: static !important;
      }
      .dropdown.dropdown-lg .dropdown-menu {
          min-width: 500px;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="css/style.css"&gt;
    &lt;script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
   &lt;div class="row"&gt;
    &lt;div class="col-md-12"&gt;
     &lt;form class="form-horizontal" role="form"&gt;
      &lt;div class="input-group" id="adv-search"&gt;
       &lt;input type="text" class="form-control" placeholder="Search for snippets" /&gt;
       &lt;div class="input-group-btn"&gt;
        &lt;div class="btn-group" role="group"&gt;
         &lt;div class="dropdown dropdown-lg"&gt;
          &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
          &lt;div class="dropdown-menu dropdown-menu-right" role="menu"&gt;
           &lt;div class="form-group"&gt;
            &lt;label for="filter"&gt;Filter by&lt;/label&gt;
            &lt;select class="form-control"&gt;
             &lt;option value="0" selected&gt;All Snippets&lt;/option&gt;
             &lt;option value="1"&gt;Featured&lt;/option&gt;
             &lt;option value="2"&gt;Most popular&lt;/option&gt;
             &lt;option value="3"&gt;Top rated&lt;/option&gt;
             &lt;option value="4"&gt;Most commented&lt;/option&gt;
            &lt;/select&gt;
           &lt;/div&gt;
           &lt;div class="form-group"&gt;
            &lt;label for="contain"&gt;Author&lt;/label&gt;
            &lt;input class="form-control" type="text" /&gt;
           &lt;/div&gt;
           &lt;div class="form-group"&gt;
            &lt;label for="contain"&gt;Contains the words&lt;/label&gt;
            &lt;input class="form-control" type="text" /&gt;
           &lt;/div&gt;
           &lt;button type="submit" class="btn btn-primary"&gt;&lt;span class="glyphicon glyphicon-search" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;
          &lt;/div&gt;
         &lt;/div&gt;
         &lt;button type="button" class="btn btn-primary"&gt;&lt;span class="glyphicon glyphicon-search" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;
        &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/form&gt; 
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying to create advance search for php project.
  but my problem is that when i click internal dropdown menu - its open but then i release mouse button it automatically close.</p>
  
  <p>I am using bootstrap 3.3.6.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      padding-top: 50px;
  }
  .dropdown.dropdown-lg .dropdown-menu {
      margin-top: -1px;
      padding: 6px 20px;
  }
  .input-group-btn .btn-group {
      display: flex !important;
  }
  .btn-group .btn {
      border-radius: 0;
      margin-left: -1px;
  }
  .btn-group .btn:last-child {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
  }
  .form-horizontal .btn[type="submit"] {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .form-horizontal .form-group {
      margin-left: 0;
      margin-right: 0;
  }
  .form-group .form-control:last-child {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
  }
  
  @media screen and (min-width: 768px) {
      #adv-search {
          width: 500px;
          margin: 0 auto;
      }
      .dropdown.dropdown-lg {
          position: static !important;
      }
      .dropdown.dropdown-lg .dropdown-menu {
          min-width: 500px;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="css/style.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>    &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;form class="form-horizontal" role="form"&gt;
                  &lt;div class="input-group" id="adv-search"&gt;
                      &lt;input type="text" class="form-control" placeholder="Search for snippets" /&gt;
                      &lt;div class="input-group-btn"&gt;
                          &lt;div class="btn-group" role="group"&gt;
                              &lt;div class="dropdown dropdown-lg"&gt;
                                  &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
                                  &lt;div class="dropdown-menu dropdown-menu-right" role="menu"&gt;
                                      &lt;div class="form-group"&gt;
                                          &lt;label for="filter"&gt;Filter by&lt;/label&gt;
                                          &lt;select class="form-control"&gt;
                                              &lt;option value="0" selected&gt;All Snippets&lt;/option&gt;
                                              &lt;option value="1"&gt;Featured&lt;/option&gt;
                                              &lt;option value="2"&gt;Most popular&lt;/option&gt;
                                              &lt;option value="3"&gt;Top rated&lt;/option&gt;
                                              &lt;option value="4"&gt;Most commented&lt;/option&gt;
                                          &lt;/select&gt;
                                      &lt;/div&gt;
                                      &lt;div class="form-group"&gt;
                                          &lt;label for="contain"&gt;Author&lt;/label&gt;
                                          &lt;input class="form-control" type="text" /&gt;
                                      &lt;/div&gt;
                                      &lt;div class="form-group"&gt;
                                          &lt;label for="contain"&gt;Contains the words&lt;/label&gt;
                                          &lt;input class="form-control" type="text" /&gt;
                                      &lt;/div&gt;
                                      &lt;button type="submit" class="btn btn-primary"&gt;&lt;span class="glyphicon glyphicon-search" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;button type="button" class="btn btn-primary"&gt;&lt;span class="glyphicon glyphicon-search" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>