title: Autofocus on a input element in dropdown menu onclick
body: <p>I have a simple bootstrap navbar with a dropdown menu. The dropdown menu has an input form. The simple task I want to achieve is to focus on it with the cursor placed in the input box when the dropdown button is clicked. </p>
  
  <p>I went through Stackoverflow hoping to get a solution but none of them were applicable to my specific task. I used <a href="https://www.w3schools.com/Tags/att_input_autofocus.asp" rel="nofollow noreferrer">autofocus</a> attribute on the input element. It partially worked as it works first time in Chrome. But if blurred once, the cursor doesn't come back. In Firefox, autofocus attribute doesn't even work.</p>
  
  <p>Second approach was triggering it manually by javascript. That too doesn't seem to work. 
  Please let me know if I am doing something wrong or if there is a better approach to achieve this goal.</p>
  
  <p>HTML Code</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
      &lt;a class="navbar-brand" href="#"&gt;Navbar&lt;/a&gt;
      &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
          &lt;ul class="navbar-nav ml-auto"&gt;
              &lt;li class="nav-item dropdown"&gt;
                  &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="focusOnInput()"&gt;
                      Dropdown
                  &lt;/a&gt;
                  &lt;div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"&gt;
                      &lt;input type="text" class="form-control" autofocus&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>JS Code</p>
  
  <pre><code>var focusOnInput = function(){
      $('.dropdown-menu input').focus();
  }
  </code></pre>
  
  <p><a href="https://codepen.io/vishnuys/pen/oPebaL" rel="nofollow noreferrer">Codepen Link</a> </p>