Question

The Dropdown is closing when I click into one of the fields. I have to reopen it and then I can type until clicking in the next field. The values are preserved even when the dropdown is closed. How can I make it stay open?

html.erb

<ul class="nav secondary-nav">      
  <li><%= link_to image_tag('icons/lock_icon.png') + " Log In" +('<span class="caret"></span>').html_safe , '#', { :class => 'dropdown-toggle', 'data-toggle' => 'dropdown' } %>

    <ul id="dropdown-login" class="dropdown-menu" style="padding: 10px 10px 0px 10px; width: 240px;">

      <%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>

        <li> 
          <div>
            <%= f.label :email %><br />
            <%= f.email_field :email %>
           </div>
        </li> 

        <li>
          <div>
            <%= f.label :password %><br />
            <%= f.password_field :password %>
          </div>
        </li>

        <li> 
          <% if devise_mapping.rememberable? -%>

            <div>
              <%= f.check_box :remember_me %> <%= f.label :remember_me %>
            </div>
          <% end -%>
        </li> 

        <li>
          <div><%= f.submit "Sign in" %></div>
        </li>

      <% end %>
    </ul>
  </li>
</ul>

i use javascripts but not worked, such as
1.

  <script type="text/javascript">
        $('#dropdown-login input, #dropdown-login label').click(function(e) {
            e.stopPropagation();
        });
  </script>

2.

 <script type="text/javascript">
    $('.dropdown-menu').find('form').click(function (e) {
        e.stopPropagation();
    });
 </script>

3.

<script type="text/javascript">
  $('body')
    .off('click.dropdown touchstart.dropdown.data-api', '.dropdown')
    .on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() });
</script>

and in application.js

//= require jquery
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.bootstrap
//= require redactor-rails
//= require_tree .
//= require bootstrap-alert
//= require bootstrap-dropdown

Can anyone help me with my problem?

UPDATE – SOLVED

Answer 1

add class=”dropdown” into first li, such as

<li class="dropdown"><%= link_to image_tag('icons/lock_icon.png') + " Log In" +('<span class="caret"></span>').html_safe , '#', { :class => 'dropdown-toggle', 'data-toggle' => 'dropdown' } %>

and add javascript..

 <script type="text/javascript">
    $('.dropdown-menu input, .dropdown-menu label').click(function(e) {
        e.stopPropagation();
    });
</script>