Prevent Material Design Lite Menu from closing on mouse up

Question

I made a login form inside an mdl menu but it keeps closing when the mouse button is released after a click on it, hence I have to use tab so I can log in.

This is the button:

<div class="nav-icon">
  <button id="login" class="mdl-button mdl-js-button mdl-button--icon" >
    <!--Icon -->
  </button>           
</div>

This is the Menu:

<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right user-menu" for="login">
  <div class="user-name mdl-shadow--2dp">
    Log In
  </div>
  <div class="login-modal-content" >
  <%= form_tag(controller: 'access', :action => 'attempt_login') do %>
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
      <input class="mdl-textfield__input login-field" type="text" name="email" id="email" value="" class="mdl-textfield__input login-field">
      <label class="mdl-textfield__label login-field" for="sample3">Email...</label>
    </div>
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
      <input class="mdl-textfield__input login-field" type="password" name="password" id="password" value="" class="mdl-textfield__input login-field">
      <label class="mdl-textfield__label login-field" for="sample3">Password..</label>
    </div>
    <%= submit_tag("Enter", class: 'mdl-button mdl-js-button mdl-button--raised mdl-button--accent') %>
  <% end %>
  </div>
</ul>

How can I prevent this click event from closing the menu?