title: Open bootstrap dropdown on input focus
body: <p>I have an input that when clicked shows a bootstrap 4 dropdown BUT I need it to open when a user tabs to it as well for ADA accessibility.  </p>
  
  <p>If I use a focus event that uses $('#input-name).dropdown('toggle') it works fine, but when the input is clicked focus fires first which opens the dropdown and then the click event closes it.</p>
  
  <p>I have tried e.preventDefault(); e.stopPropagation();  but neither help solve this issue.</p>
  
  <pre><code>events: {
    focus #healthPlanMenu": "openDropDown"
  }
  
  
  openDropDown: function (e) {
  
    if ($('#healthPlanMenu').find('.dropdown-menu:no(.show)')){
      $("#healthPlanMenu.dropdown-toggle").dropdown('toggle');
     }//fails
  
      $("#healthPlanMenu.dropdown-toggle").dropdown('toggle');//fails
      $( "#healthPlanMenu" ).click();//fails
  
    }
  </code></pre>