Drop Down Menu / Posts /

DropDown menu sub-menu closing when including select element

-4
I have a text input field in a sub-menu. When the browser presents auto-complete options and the mouse is moved to select an option, the ddmenu sub-menu closes. Can I add something to the menu html or css to prevent this? I prefer not to disable auto-complete. This behavior is present in at least Firefox 24.0 (Win7) and IE10. Thanks!
David  11 years ago   viewed: 7576    

5 Answers

1
All right, thanks. If I discover a way to prevent the menu from closing during input I'll amend this post.
David   11 years ago
0
I guess it might be the bubble up issue (but not very sure).
Would you please try adding the following codes to see if it works:
Add the following script into your page:
<script>
    function noBubble(e) {
        if (e && e.stopPropagation) {
            e.stopPropagation();
        }
        else {
            window.event.cancelBubble = true;
        }
    };
</script>

And for your select element, add:
<select onmouseover="noBubble" onmouseout="noBubble"> ... </select>

If it doesn't work, please stage a very simple testing page online(or zip it and email to Menucool) and I will take a closer look.

Thanks
Milo   11 years ago
0
It still happens with the noBubble function and onmouseover/out. You can see it at the demo menu www.menucool.com/tooltip-menu using the "Name" input in the consectetur menu. If you cursor into the Name input and then try to use an autofill value the menu closes. The same thing happens in the dropdown menu, but the dropdown demo doesn't have an input.
David   11 years ago
0
Have you confirmed this behavior on the tooltip menu demo? After looking into it (i.e. stackoverflow), I do think the issue is related to event bubbling but couldn't make the solutions there work. Also, to clarify my original post it isn't in a "<select>" it is in a text "<input>" that causes the menu to close, just like the "Name" input in the tooltip menu demo. You have to click into the "Name" field and then choose an autofill value to see the behavior. I'll keep trying to solve, but would appreciate help from the experts.
David   11 years ago
0
auto-complete is a newly added element and the tooltip script can hardly add onmouseover="noBubble" onmouseout="noBubble" to it. So maybe you have to disable the auto-complete.
Milo   11 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
▲