jQuery .focus() funktioniert nicht in Safari (Desktop) auf Suchfeld

Question

Ich habe ein Suchfeld, das ausgeblendet ist, und wenn ein Benutzer auf das Suchsymbol klickt, wird es geöffnet, und ich möchte Fokus auf die Sucheingabe sofort bringen Der Benutzer muss also nicht zweimal klicken. Es funktioniert perfekt in Chrome, aber nicht in Safari (Desktop). Ich habe einige andere Vorschläge gesehen, dass das Einwickeln in eine Zeitüberschreitung funktioniert, aber immer noch keine Würfel. Irgendwelche Gedanken?

jQuery:

$search  = $('.header--search-container'); 
$searchInput = $('.header--search-input input[type=search]'); 

    $search.click(function(){ 
    $searchInput.toggleClass('search-active'); 
    setTimeout(function(){ 
     $('header .header--search-input .search-field').focus(); 
    }, 1); 
    }); 

HTML (Sie wirklich sein nicht denken, benötigt aber nur so können Sie ... Siehe auch geschwärzt ist das <header> Element):

<div class="header--search-input"> 
     <form role="search" method="get" class="search-form" action="http://example.com/"> 
     <label> 
     <span class="screen-reader-text">Search for:</span> 
     <input type="search" class="search-field" placeholder="Search &hellip;" value="" name="s" /> 
     </label> 
     <input type="submit" class="search-submit" value="Search" /> 
     </form>   
</div> 
     <div class="header--search-container"> 
      <svg> 
      .. redacted for legibility on stack overflow .. 
      </svg> 

     </div> 

Answer 1

eine höhere Hinzufügen setTimeout Wert funktioniert.

$search.click(function(){ 
    $searchInput.toggleClass('search-active'); 
    setTimeout(function(){ 
     $('header .header--search-input .search-field').focus(); 
    }, 500); 
    });