jQuery - hide dropdown when DOM element is focused

Question

i got to show a dropdown menu, now i would like to hide that when anoher element (not dropdown or dropdown's children) in the DOM is focused.

(hide dropdpown when element !== dropdown||dropdown's childrens is focused in the DOM)

i tryed with focusout() with no results:

$('a').on('click',function(){
        $('.drop.user-menu').fadeIn(); 
});

$('.drop.user-menu').on('focusout',function(){
        $(this).fadeOut();
        alert('antani');
});

any idea?

jsfiddle here : example

@Parse tryed but it won't work, i would like , when focusing out of dropdown to hide dropdown check i updated adding jsfiddle please — itsme, Jun 11 '13 at 09:11
possible duplicate http://stackoverflow.com/questions/152975/ — xec, Jun 11 '13 at 09:23
@badbetonbreakbutbedbackbone see this link, may be useful http://stackoverflow.com/questions/3088738/jquery-need-alternative-to-focusout — Bhushan Kawadkar, Jun 11 '13 at 10:10

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

event.target() will be useful in this scenario:

$('.drop.user-menu').on('focusout',function(e){
    if(e.target !== this){
      $(this).fadeOut();
      alert('antani');
    }
});

Update:

Check this out and see if helps:

 $('.a').on('click', function (e) {
     e.stopPropagation();
     $('.drop.user-menu').fadeToggle();
 });
 $('.drop.user-menu').on('click', function (e) {
     e.stopPropagation();
     $('.drop.user-menu').fadeIn();
 });
 $(document).on('click', function (e) {
    if (e.target !== $('.drop.user-menu') && e.target !== $('.a')) {
       $('.drop.user-menu').fadeOut();
    }
 });

The above script done with click in this fiddle

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 11 '13 at 09:12

Jai

74,255
12
74
103

@badbetonbreakbutbedbackbone checkout the fiddle and the updated script. – Jai Jun 11 '13 at 09:33
the e.target check will do nothing as clicks on .drop-user-menu will never reach document anyway – xec Jun 11 '13 at 09:36
@badbetonbreakbutbedbackbone, are you sure this is the answer? This has nothing to do with focus/blur. It's *exactly* the same as the answer you downvoted because it relied on clicks! – Derek Henderson Jun 11 '13 at 09:37
yeah i just edited jsfiddle and it works http://jsfiddle.net/BBxEN/15/ @DerekHenderson – itsme Jun 11 '13 at 09:38
@Jai if you want to edit your answer i make some changes http://jsfiddle.net/BBxEN/15/ to make it work on my own – itsme Jun 11 '13 at 09:39
@badbetonbreakbutbedbackbone, it "works" if you *click* outside the menu, but that is different from what you asked. You asked how to make it work when the menu loses focus. What if the user tabs out of the menu (which is very common)? Nothing will happen then, even though the menu will have lost focus. Again, as I said, this answer is *exactly* the same as the answer you downvoted because of being click-dependent. – Derek Henderson Jun 11 '13 at 09:42
@DerekHenderson i can't see any help/working example in that way, if some will be i'll accept that instead of this which is a good work around :P – itsme Jun 11 '13 at 09:43
@DerekHenderson lol are you the **robocop** of stack? :D (joking) he removed answer, but that was really not helping , this involves click but in the right way IMO – itsme Jun 11 '13 at 09:46
@DerekHenderson Great Good luck with it. – Jai Jun 11 '13 at 09:50
LOL, @badbetonbreakbutbedbackbone, aren't we *all* the robocops of SO? Ultimately it's about getting the most useful answers to the questions asked, so we all chime in with votes and comments and you choose. I'm just doing my chiming in, not because I care about the rep points but because I don't see the question asked answered. Then again, if you altered the question, I'd happily upvote all these answers and delete mine. – Derek Henderson Jun 11 '13 at 09:50
@Jai sorry man i feel Derek's code better , less code at all http://jsfiddle.net/BBxEN/8/ thanks a ton anyway!!! – itsme Jun 11 '13 at 09:50
@DerekHenderson rofl you gotcha your fkn accepted answer ;) thanks a lot – itsme Jun 11 '13 at 09:51

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

There is no focus or focusout events triggered, because you're not operating on form fields.

This is probably what you want : How do I detect a click outside an element?

var menu = $('.drop.user-menu');
menu.on('click',function(e){
    e.stopPropagation();  // stop clicks on menu from bubbling to document
});
$('a').on('click', function (e) {
    menu.fadeIn();
    e.stopPropagation(); // stop clicks on <a> from bubbling to document
});
$(document).on('click',function(e){
    // any other click
    if (menu.is(":visible")) {
        menu.fadeOut();
    }
});

http://jsfiddle.net/BBxEN/10/

Update

As Derek points out, this is not very friendly for keyboard users. Consider implementing a way for users to both open and close the menu using keyboard shortcuts.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 11 '13 at 09:15

xec

17,349
3
46
54

Yes. The question is how to trigger the fade out when the element loses focus, not simply on click of some other element in the DOM. So if a user loses focus by tabbing out, your code fails to close the menu. – Derek Henderson Jun 11 '13 at 09:39
@DerekHenderson: this is true, but you have the exact opposite issue with your tabindex hack: http://jsfiddle.net/BBxEN/16/ (you would close the menu prematurely) – xec Jun 11 '13 at 09:42
Well, that's a different scenario, isn't it? – Derek Henderson Jun 11 '13 at 09:45
1

@DerekHenderson: same scenario, different solution, different problem. but it's still a bigger problem to not be able to use the menu with a keyboard rather than not having it close when you hit tab. Adding code to close when hitting ESC might be a better approach? I am open to other ideas though. – xec Jun 11 '13 at 09:47
@badbetonbreakbutbedbackbone, xec is right. If you add a link inside the menu div, my code will not work for you. And I have to assume you'll want links in your menu. Both my approach and the others here are halfway measures. What you ideally should have is something that determines whether the newly focused element is part of your menu and if not then fadeout. I would "unaccept" my answer for now. – Derek Henderson Jun 11 '13 at 09:57
I have changed my answer so that it handles the scenario you set up as well. If you edit your answer, I can remove my downvote. – Derek Henderson Jun 11 '13 at 10:30

score 1 · Accepted Answer · edited May 23 '17 at 11:43

1

A DIV cannot take or lose focus (unless it has a tabindex). You'll have to give it a tabindex or add a focusable element into your div.drop.user-menu. See Which HTML elements can receive focus?.

You then also have to explicitly give that element (or an element within it) focus (with .focus()) as simply fading it in doesn't give it focus.

When the element blurs, then check if the new active element is still part of the menu. If it's not, fade out the menu.

See a working example.

edited May 23 '17 at 11:43

Community

1
1

answered Jun 11 '13 at 09:16

Derek Henderson

9,388
4
42
71

can you give me example please i didn't understand :( – itsme Jun 11 '13 at 09:20
@badbetonbreakbutbedbackbone, you say you can't see any working example, but have you tried looking at my fiddle? It does exactly what you asked, whether the focus is lost with a tab or a click or some other method. – Derek Henderson Jun 11 '13 at 09:47
lol dude you were right, maybe cause of temp problem on FF that didn't worked when i checked now it looks perfect ! thank you so much and sorry for misunderstandings :/ – itsme Jun 11 '13 at 09:49

score 0 · Answer 4 · answered Jun 11 '13 at 09:10

0

You can tru with blur, is what you want?
Try this:

$('.drop.user-menu').on('blur',function(){
   $(this).fadeOut();
   alert('antani');
});

answered Jun 11 '13 at 09:10

Alessandro Minoccheri

35,521
22
122
171

jQuery - hide dropdown when DOM element is focused

4 Answers4

Update:

Update