title: Focus on input filed automatically?
body: <p>I have custom-modal javascript that contains a custom search input,
  how to make that when the custom modal is activated makes the input is autofocus without needing the mouse to click to activate it?</p>
  
  <p>I searched and checked that all the ways work with Bootstrap Modal.</p>
  
  <p>Below the 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 twentytwenty = twentytwenty || {};
  
  twentytwenty.searchToggles = {
    init: function() {
      this.toggleSearch();
      this.untoggleSearch();
      this.untoggleOnEscapeKeyPress();
    },
    toggleSearch: function() {
      var $this = this;
      document.querySelectorAll('.toggle.search-toggle.desktop-search-toggle')
      $('.custom-modal').on('.custom-modal.open', function() {
        $(this).find('input:first').focus();
      }).forEach(function(element) {
        element.addEventListener('click', function(event) {
          event.preventDefault();
          $this.toggleClass('open', 'close');
        });
      });
    },
    untoggleSearch: function() {
      var $this = this;
      document.querySelectorAll('.custom-close').forEach(function(element) {
        element.addEventListener('click', function(event) {
          event.preventDefault();
          $this.toggleClass('close', 'open');
        });
      });
  
      document.addEventListener('click', function(event) {
        if (event.target.className == 'custom-modal custom-search-popup open') {
          $this.toggleClass('close', 'open');
        }
      });
    },
    // Close toggle on escape key press
    untoggleOnEscapeKeyPress: function() {
      var $this = this;
      document.addEventListener('keyup', function(evt) {
        if (evt.keyCode == 27) {
          $this.toggleClass('close', 'open');
        }
      });
    },
    toggleClass: function(add, remove) {
      var el = document.getElementsByClassName('custom-modal custom-search-popup');
      for (var i = 0; i &lt; el.length; i++) {
        el[i].classList.add(add);
        el[i].classList.remove(remove);
      }
    }
  };
  
  function add(add, remove) {
    console.log('add');
  }
  
  /**
   * Is the DOM ready
   *
   * this implementation is coming from https://gomakethings.com/a-native-javascript-equivalent-of-jquerys-ready-method/
   *
   * @param {Function} fn Callback function to run.
   */
  function twentytwentyDomReady(fn) {
    if (typeof fn !== 'function') {
      return;
    }
  
    if (
      document.readyState === 'interactive' ||
      document.readyState === 'complete'
    ) {
      return fn();
    }
  
    document.addEventListener('DOMContentLoaded', fn, false);
  }
  
  twentytwentyDomReady(function() {
    twentytwenty.searchToggles.init();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form method="get" id="search-form-alt" action="'. esc_url(home_url('/')) .'"&gt;
    &lt;input type="text" name="s" autofocus id="s" placeholder="Type your search words here..."&gt;
    &lt;input type="submit" class="fa fa-search" id="searchsubmit" value="" /&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>