title: jQuery .focus() not working in Safari (desktop) on search field
body: <p>I have a search field that is hidden, and when a user clicks on the search icon, it opens and I want to bring focus to the search input immediately so the user does not have to click twice. It works perfect in Chrome, but not in Safari (desktop). I saw some other suggestions that wrapping it in a timeout will work, but still no dice. Any thoughts?</p>
  
  <p>jQuery:</p>
  
  <pre><code>$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);
    });
  </code></pre>
  
  <p>HTML (Don't really think its needed but just so you can see... Also redacted is the <code>&lt;header&gt;</code> element) :</p>
  
  <pre><code>&lt;div class="header--search-input"&gt;
        &lt;form role="search" method="get" class="search-form" action="http://example.com/"&gt;
         &lt;label&gt;
           &lt;span class="screen-reader-text"&gt;Search for:&lt;/span&gt;
           &lt;input type="search" class="search-field" placeholder="Search &amp;hellip;" value="" name="s" /&gt;
          &lt;/label&gt;
          &lt;input type="submit" class="search-submit" value="Search" /&gt;
         &lt;/form&gt;        
   &lt;/div&gt;
          &lt;div class="header--search-container"&gt;
            &lt;svg&gt; 
             .. redacted for legibility on stack overflow ..
            &lt;/svg&gt;
  
          &lt;/div&gt;
  </code></pre>