Chrome - focus on input doesn't work

Question

I want to add focus on my input when it's displayed. In Firefox and Internet Exoplorer it's working fine but only in Chrome it's not working.

Jquery Code:

$(document).ready(function() {
 $('.magnifier').click(function() {
  $('.search').slideToggle("slow");
   setTimeout(function() {
     $('.input-search').focus();
   }, 0);
 });
});

HTML code:

<a class="magnifier" style="cursor: pointer"><img src="magnifier.png" alt="search"/></a>          
 <div class="search" class="rightfloat" style="display: none">    
   <input style="font-family:'Open Sans'" type="text" name="search" placeholder="<?php echo $text_search; ?>" value="<?php echo $search; ?>" class="input-search" />
 </div>   

In Chrome when I click on the magnifier the input is not focused but when I click again(to hide .search) input is focused while .search is not hidden.
Thanks

Answer 1

It looks like you're trying to focus on the element before it's finished showing up on the screen.

Try this instead.

    $(document).ready(function(){
        $('.magnifier').on('click', function() {
            $('.search').slideToggle(300, function(){
                $('.input-search').focus();
            });
        });         
    });

What it's doing is sliding down the input and when it's finished sliding then it tells it to focus on the input. It works for me.