I'm using JQuery UI 1.12. I have created custom select menus (an unordered list, modeled off a SELECT input) taht I would like to open when someone clicks on them, or when someone clisks the "Tab" key to move the focus to one. To accommodate opening when getting the focus, I have this JS
if ( !$this.parent().hasClass('select') ) {
var $wrapper = $("<div />", {
'class' : "select",
'tabIndex' : '1'
}).css({
width : selectWidth
}).focus(function() {
$(this).find('.select-styled').click();
}).blur(function() {
clickHandled = false;
$(this).find(".select-options li").removeClass("selected");
$(this).find('.select-styled').removeClass('active').next('ul.select-options').hide();
});
$this.wrap( $wrapper );
} // if
However, if teh screen is less than 500 pixels in width, I want my custom menu to occupy the entire screen, so I added this style
@media only screen and (max-width:501px) {
.active,
.active + ul {
width:100vw;
height: 100vh;
max-height: initial;
position: fixed;
top:0;
left:0;
}
}
The problem is, now on Google Chrome only, when I compress my screen to less than 500 pixels, and click on my custom menu, it immediately closes. This Fiddle illustrates this phenomenon. This doesn't happen on Firefox. How do I keep my menu open on Google Chrome when I click on it?
The problem is this binding;
$(document).click(function(event) {
$styledSelect.removeClass('active');
$list.hide();
});
If you remove this section of the code, it will work as you would like. Open menu upon focus, open menu on click, close the menu when you click somewhere else. See my fork here; http://jsfiddle.net/aarmu2mf/
For some reason, I didn't have time to investigate deeper, when you click on smaller screen it triggers this function when you click the element for the first time. My guess is that when you click it, it gets focus, the focus state then triggers click. Meaning the flow is something along the lines: Click -> Function opens the menu -> Browser focuses the clicked element -> Function binded to focus event triggers a click on element - Function closes the menu.
Also please note, it's not really good behaviour to open the menu upon focus, most users are used to opening dropdowns with spacebar when they have focus on the element.
Moving from comments to an answer to clarify better.
On Line 52 of your fiddle, I see:
var $list = $('<ul />', {
'class': 'select-options'
}).insertAfter($styledSelect);
On Line 95, I see:
$(document).click(function(event) {
$styledSelect.removeClass('active');
$list.hide();
});
This would hide $list upon click of the document. This makes sense to clear or hide the menu. I think you should make this conditional, to help ensure there is no conflict with other click events.
Line 66:
$styledSelect.unbind('click');
This should unbind the click event, but since it's only for one specific element and may not effect the click event bound to the document. Still investigating. Will update as I go.