Blur is not working for select menu on chrome

Question

I want blur select menu when it is open. I have made a small function when you hover the mouse on a tag then blur function will call. It is working fine in other browser but not working in chrome. fiddle

Reproduce bug : click and open select menu and hover anchor tag, open select menu should be closed

<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
   $('a').hover(function(){
    $('select').blur();
   })
})
</script>
</head>
<body>
<select>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
</select>
<a href="#">hover me</a>
</body>
</html>

stackoverflow.com/questions/10851882/… - the second answer here seems to deal with the chrome issue — Dallas
@amit .. Can you explain what you are trying to achieve with .blur() ? — Mohammad Adil

ATud ATud · Accepted Answer · 2013-05-24T14:57:46

I had the same problem, and the idea was clear: you cannot blur an opened select element, because Chrome and Safari waits for the answer. BUT there is a workaround that you may find acceptable.

First, you cannot set focus to another element while the "select" is still active, so I have removed it by applying a "display:none". After that I trigger a click event on another harmless element. And then I re-add the select back, by setting a display:block. In this case, the code would look like(i will add a span to click on):

.......
<select>
<option>Test</option>
......
</select>
<a href="#">hover me</a>
<span class="clickable">element clicked</span>
.......
<script type="text/javascript">
$(document).ready(function (){
    jQuery("a").mouseenter(function (){
        $("select").css({'display':'none'});
        $("span.clickable").focus().click();
        $("select").css({'display':'block'});
    });    
});
</script>

Blur is not working for select menu on chrome

2 Answers