Autofocus on a input element in dropdown menu onclick

user_5097563 0
Viewed 6640

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

bootstrap-4 html jquery javascript
3 Answers

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>

user_38805850

In the link: a class="nav-link dropdown-toggle"

Just add: 

onclick="setTimeout(focusOnInput, 1000)"

instead of 

onclick="focusOnInput()"

That will delay the execution of the function for 1 second, until the element is clickable....

Ofc. if you want to do it faster, change the 1000 to something else...those are miliseconds...

Good luck

user_49664030

Add unique id to the input. Ex:

And use onclick event to focus the input form. When user click on Dropdown input focus.

var input = document.getElementById("D-input");
function focusOnInput() {
input.focus();
}

I hope it helps you.

user_138192260
Related