2

I'm using the Bootstrap dropdown as an login possibility on a homepage. The dropdown div contains the username & password field. It works well, but when a user selects an option from the (browser) autocomplete functionality, the dropdown loses focus and disappears.

How can I keep the dropdown visable when a user selects an autocomplete option?

This is my code:

<div class="dropdown-menu user-actions-menu pull-right clearfix" role="menu">
<form method="POST" action="/login" accept-charset="UTF-8" role="form">

<div class="form-group">
    <input placeholder="E-mail adres" class="form-control input-lg" type="text" required="required" name="email">
</div>
<div class="form-group">
    <input placeholder="Type hier je wachtwoord" class="form-control input-lg" required="required" name="password" type="password" value="">
    <span class="help-block pull-right"><a href="account/wachtwoord-vergeten">Wachtwoord vergeten?</a></span>
</div>

<div class="form-group" style="clear:right;">
    <input name="remember" type="hidden" value="1">   
    <input class="btn btn-custom btn-flat btn-block" type="submit" value="Inloggen">
</div>
</form> 
</div>

I've added some pictures to make it clearer:

1: dropdown opens when someone hovers over 'inloggen' (= Dutch for login):

enter image description here

2: Someone has entered an emailaddress before, so the browser gives this as an option:

enter image description here

3: Users hovers over the option with the mousepointer and BAM: the dropdown disappears (because it has lost hover of the mouse):

enter image description here

Pim
  • 5,626
  • 4
  • 19
  • 27
  • You could add `autocomplete="off"` if you don't want that functionality – Luke Sep 25 '14 at 20:02
  • 1
    Perhaps a hint? http://stackoverflow.com/questions/11617048/twitter-bootstrap-stop-just-one-dropdown-toggle-from-closing-on-click Found via a Google search for: bootstrap dropdown disable close – Reid Sep 25 '14 at 23:48
  • @Doctus: yes I could, but I don't want to do that :) – Pim Sep 26 '14 at 02:09
  • @Reid: thanks, I should have mentioned that that does not solve thus specific issue with the autocomplete, because I do not know how to target it with jquery (tried the mentioned solution already). Any thought on how to select this autocomplete thing with jquery? – Pim Sep 26 '14 at 02:13
  • @Pim I don't see autocomplete in your HTML. And I have difficulty imagining what you are trying to do. I can't imagine doing what you are doing. I would expect you to use a bootstrap popup for what you seem to be doing and never expect you to use a dropdown for logging in. Also, I don't see why your question has a php tag or css tag. – Reid Sep 26 '14 at 02:57
  • @Reid I've added some picture to make the problem more clear. Hope this helps you help me! :) – Pim Sep 26 '14 at 09:00
  • Go to: http://getbootstrap.com/javascript/ and look at "Launch demo modal" button. Realize that the modal can be brought up with code: $('#modalname').modal('show'); if you want to bring it up on hover. Maybe connecting the dots from this will help. And if you can get it to work, post the answer so that others can see it. Use modal rather than dropdown, I say. – Reid Sep 26 '14 at 10:26

1 Answers1

1

It is not specific to Bootstrap.

Here is a solution using jQuery (works for bootstrap or non-bootstrap login box) :

$('.dropdown').on('mouseover', function () {
    $('.dropdown-menu', this).show();
}).on('mouseout', function (e) {
    if (!$(e.target).is('input')) {
        $('.dropdown-menu', this).hide();
    }
});

thanks to dtrunks for this solution : Div disappears when hovering the input autocomplete in Firefox

Community
  • 1
  • 1
Céline Garel
  • 166
  • 4