title: Set focus on text input using button and JavaScript
body: <p>The following JavaScript code to set focus on the text input works in Codpen, but not on my Client's website (in development). No errors are displayed and I can use <code>classList</code> to add or remove classes for the same text input.</p>
  
  <p>Not sure where the issue is in my code...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var searchToggle = document.querySelectorAll( ".js--search-toggle" );
  const searchForm = document.querySelector( ".header-search-form" );
  const searchInput = document.querySelector( ".search-field" );
  
  searchToggle.forEach(item =&gt; {
    item.addEventListener('click', e =&gt; {
      searchForm.classList.toggle( "open" );
      searchInput.style.backgroundColor = "red"; // This works
      searchInput.focus(); // This does not
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form role="search" method="get" class="header-search-form" action="{{ site.url }}"&gt;
    &lt;label for=""&gt;&lt;/label&gt;
    &lt;input type="search" class="search-field" autocomplete="off" placeholder="Search for a topic" value="" name="s" /&gt;
    &lt;button type="button" class="btn js--search-toggle"&gt;
        Set Search Focus
   &lt;/button&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Update</strong></p>
  
  <p><a href="http://wp81805.wpdns.ca/" rel="nofollow noreferrer">Preview URL with issue</a></p>