Раскрывающееся меню исчезает, когда я нажимаю на форму внутри него

Question

У меня есть выпадающий список для входа в Ruby в проекте Rails. Однако, когда я нажимаю на формы внутри, они не отвечают.

Если я помещаю z-index в класс "wrapper-dropdown-3", форма отвечает, и курсор появляется, прежде чем все меню быстро исчезает. .

Я читал, что метод stopPropagation () может работать для моей проблемы, но пока мне не повезло ... Любая помощь будет принята с благодарностью!

Вот мой код:

const initDropDown = () => {

  function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.content = this.dd.find('.dropdown');
    this.initEvents();
  }
  DropDown.prototype = {
    initEvents : function() {
      var obj = this;

      obj.dd.on('click', function(event){
        $(this).toggleClass('active');
      });
    }
  }

  var dd = new DropDown( $('#dd') );

}

export { initDropDown }

.header {
  background-color: #7FA269;  /*dark green*/
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 85px;
  padding: 0px 30px 0px 0px;
  font-size: 18px;
  font-family: sans-serif;
  border: 1px solid rgba(93, 96, 99, 0.5);
}

.login-avatar {
  border: 1px solid rgba(47, 79, 79, 0.6);
  font-size: 18px;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  height: 28px;
  width: 28px;
  display: flex;
  justify-content: center;
  background-color: aliceblue;
  margin-right: 10px
}

.header-menu {
  margin-top: 30px;
  color: darkslategrey;
  font-family: 'Karla';
  font-size: 22px;
/*  text-shadow: 1px 1px 15px darkslategrey;*/
}

.header-menu > li {
  display: inline;
  margin-right: 60px;
}

.header-menu > li:last-of-type {
  margin-right: 0;
}

.dropdown:hover .features-menu {
  display: flex;
  flex-direction: column;
  background: rgb(198, 255, 179);
  border-radius: 5px;
  padding-top: 60px;

  position: absolute;      /* Add these */
  top: -25px;
  left: -30px;

  z-index: 1;
}

.features-menu li {
  list-style: none;
  border-bottom: 1px solid #FFF;

  padding: 0 40px 10px 20px;
  margin: 10px;

}

.features-menu li:last-of-type {
  border-bottom: none;
}

.dropdown {
  position: relative;
}

.dropdown li {
  position: relative;
  color: lightslategrey;
}

.dropdown > span {
  z-index: 2;
  position: relative;  /* This is important! */
  cursor: pointer;
}

.features-menu {                    /* Add this as a new rule */
  display: none;
}

.logo {
  display: flex;
  justify-content: flex-start;
  height: 83px;
  box-shadow: 0 0px 1px 1px rgba(0,0,0,0.1);

}

.logo img {
 width: 150px;
}

<header class="header">
  <%= link_to root_path do %>
  <div class="logo">
    <%= image_tag "logo.jpg" %> <!-- change to svg?  -->
  </div>
  <% end %>
  <ul class='header-menu'>
   <div id="dd" class="wrapper-dropdown-3" tabindex="1">
    <% if user_signed_in? %>
    <div class="login-avatar">ら</div>
    <span><%= link_to current_user.username, user_profile_path %></span>
    <% else %>
    <span>Login</span>
    <ul class="dropdown">
     <%= form_for(resource, as: "login", url: session_path(resource_name), html: { id: "login-form" }, remote: true) do |f| %>
     <div class="field">
      <%= f.label :username, class: "text-small-uppercase" %><br />
      <%= f.text_field :username, autofocus: true, autocomplete: "username", class: "text-body" %>
    </div>
    <div class="field">
      <%= f.label :password, class: "text-small-uppercase" %><br />
      <%= f.password_field :password, autocomplete: "current-password", class: "text-body" %>
    </div>


    <div class="actions">
      <%= f.submit "Log in" %>
    </div>

    <% end %>
    <% end %>
  </ul>
</div>
</header>