Autofocus on a input element in dropdown menu onclick

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.

I went through Stackoverflow hoping to get a solution but none of them were applicable to my specific task. I used autofocus 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.

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.

HTML Code

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="focusOnInput()">
                    Dropdown
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                    <input type="text" class="form-control" autofocus>
                </div>
            </li>
        </ul>
    </div>
</nav>

JS Code

var focusOnInput = function(){
    $('.dropdown-menu input').focus();
}

Codepen Link

Solution

You need to use shown.bs.dropdown event:

This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).

$('.dropdown').on('shown.bs.dropdown', function(e) {
    $('.dropdown-menu input').focus();
})

$('.dropdown').on('shown.bs.dropdown', function(e) {
    $('.dropdown-menu input').focus();
})

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                    <input type="text" class="form-control" autofocus>
                </div>
            </li>
        </ul>
    </div>
</nav>