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>

http://stackoverflow.com/questions/10851882/close-a-select-dropdown-list-programatically-with-javascript-jquery - the second answer here seems to deal with the chrome issue — Smern, May 22 '13 at 11:37
@amit .. Can you explain what you are trying to achieve with `.blur()` ? — Adil Shaikh, May 22 '13 at 11:45

ATud · Accepted Answer · 2013-05-27T08:04:58.557

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>

Doesn't it affect accessibility to drop the focus into a random element? It seems like you're stranding users who tab through elements. Is there an accessibility-friendly solution available? — AJFarkas, Dec 12 '14 at 18:30
This did the trick. `$("select").blur()` worked in IE, Edge, and Chrome - but not Firefox. `$("select").css({ "display": "none" }).blur().css({ "display": "inline" });` did the trick across all of them. — Kris Krause, Apr 07 '17 at 21:00

score 1 · Answer 2 · answered May 22 '13 at 11:33

1

You need to use .trigger() for that

<select id="selectboxId">
.......
</select>

   $ ('#selectboxId').trigger('blur');

answered May 22 '13 at 11:33

PSR

39,804
41
111
151

1

I didn't downvote.. but.. `.blur()` is shortcut for `.trigger('blur')` see the api `-->` http://api.jquery.com/blur/ – Adil Shaikh May 22 '13 at 11:37
no when we want to fire blur event with out doing that manually we will use trigger – PSR May 22 '13 at 11:38
1

It is behaving like blur event. bug still there – Jitender May 22 '13 at 11:42
http://api.jquery.com/blur/ When `blur()` is called without any arguments, this method is a shortcut for `.trigger('blur')`. – Qantas 94 Heavy May 22 '13 at 11:43

Blur is not working for select menu on Chrome

2 Answers2

Linked