Cannot give .focus() to an element of a dropdown menu

select2 open dropdown on focus
searchable dropdown jquery
bootstrap select dropdown with search box
angular element focus
set focus on select2 jquery
how to set focus on dropdown in javascript
search box with suggestions dropdown
select box with search option in html

Here is a Boostrap navigation bar, containing a dropdown menu, containing itself an <input>.

When I click on the dropdown menu, it is succesfully displayed. The value of the <input> is successfully changed to Bonjour but this <input> doesn't get the focus. Why ?

http://jsfiddle.net/rzsmdg4f/1/

How to give the focus to a input contained in a dropdown menu with .focus() ?


Code :

<div class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="maa">Dropdown<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu" style="min-width: 250px;">
                    <li>
                        <div style="padding:4px 20px;">Link:</div>
                    </li>
                    <li>
                        <div style="padding:4px 20px;">
                            <input class="form-control" id="ha" type="text" placeholder="blabla" />
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

JS :

{
    var maa = document.getElementById('maa');
    console.log(maa);
    maa.addEventListener('click', function () {
        console.log($('#ha'));
        $('#ha').val('Bonjour');
        $('#ha').focus();
    });
};

jsFiddle Demo

The element exists at the time of the click, so changing its value and logging it will properly show the current state of the element. However, it has not been displayed yet and as a result focusing it will not really have any effect. You could probably refactor some small snippet in the library to expose a hook that you could use to make your focus work. Or, you could make the observation that in the very next event handler the element will be visible and use a small timeout.

maa.addEventListener('click', function () {
    console.log($('#ha'));
    $('#ha').val('Bonjour');
    setTimeout(function(){$('#ha').focus();},10);//timeout here
});

Cannot give .focus() to an element of a dropdown menu, How to give the focus to a input contained in a dropdown menu with .focus() ? Code : <div class="navbar navbar-default navbar-static  More "Try it Yourself" examples below. The focus () method is used to give focus to an element (if it can be focused). Tip: Use the blur () method to remove focus from an element. Give focus to a text field, immediately after the document window has been loaded: Your message has been sent to W3Schools. W3Schools is optimized for learning

the simplest solution i came in mind is to just delay the focus. the reason its not focusing is because the element is not yet visible.

http://jsfiddle.net/xab7Leoq/

setTimeout(function() {
  $('#ha').focus();
}, 100);

another solution is to find out when its getting visible, and then do it. it may be a better solution yet more complicated. :)

edit1: stopping propagation:

// Prevents the propagation
$('#ha').click(function(ev) {
  ev.stopPropagation();
});

like in http://jsfiddle.net/xab7Leoq/

Programatically focus the select (but not activate) · Issue #201 , When opening the select list with .activate() the focus won't be put on the searchbox, Cut and pasted your code in and get TypeError: Cannot read <ul class="ui-select-choices ui-select-choices-content dropdown-menu must be set to true on the element (ui-select-wrapper) for the focus to take effect. In brief, triggering a modal form after using a uib-dropdown on the page makes it impossible to focus on the form input. Try the following in the provided plunker: Click button (A) to activate modal form. Click on the input & it focuses. Click the uib-dropdown button 'Select' (no need to select menu button (B)) Click button (A) again.

Figured I might as well post an answer, even if late... since this seems to work well and doesn't require setTimeout: http://jsfiddle.net/cvLbfttL/

$("#maa").focus(function () {
    $('#ha').val('Bonjour');
    $('#ha').focus();
    return false;
});
$('#ha').click(function(){return false;});

The anchor "maa" gets the focus when clicked, and it happens after the click callback/event returns. So you can do your code in the focus event instead. I couldn't figure out how to tab to the anchor inside JSFiddle, but I assume the code would also run if you set the focus to the anchor using some other method, but that should be fine I think, maybe even nice.

Dropdown does not open on tab focus · Issue #4025 · select2 , Select2 doesn't trigger the focus event on the original element when the dropdown is focused. UPDATE -- added guard for multi select which will pass focus to input box so I added code to set focus back to the main select2 element when the dropdown is closing: I can't seem to reproduce that issue? Learn how to create a clickable dropdown menu with CSS and JavaScript. A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list: Create a dropdown menu that appears when the user clicks on a button. Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element.

An example using callback function. Man avoid to use setTimeout() function, because the results are unpredictable.

http://jsfiddle.net/v62tdn9z/

var $maa=$('#maa'), $ha=$('#ha');

$maa.mousedown( function () {
    $ha.val('Bonjour');
    $maa.mousemove(function () { $ha.focus(); });
});

How To Search for Items in a Dropdown, Create a dropdown menu that appears when the user clicks on a button. Use a container element (like <div>) to create the dropdown menu and add the The search field when it gets focus/clicked on */ width of the dropdown content to be as wide as the dropdown button, set the width to 100% function myFunction() { Cannot give .focus() to an element of a dropdown menu. Here is a Boostrap navigation bar, containing a dropdown menu, containing itself an <input>. When I click on the dropdown menu, it is succesfully displayed. The value of the <input> is successfully changed to Bonjour but this <input> doesn't get the focus.

Having a tabindex on the element could be the solution. This worked in my case.

How To Create a Dropdown Menu With CSS and JavaScript, Create a dropdown menu that appears when the user clicks on a button. Use a container element (like <div>) to create the dropdown menu and add Dropdown button on hover & focus */ Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to function myFunction() { The <datalist> Element. The <datalist> element specifies a list of pre-defined options for an <input> element. Users will see a drop-down list of the pre-defined options as they input data. The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.

Dropdowns · Bootstrap, Wrap the dropdown's toggle (your button or link) and the dropdown menu within Dropdowns can be triggered from <a> or <button> elements to better fit your or make it into a dropdown menu, and use margin or padding utilities to give it the $('#myDropdown').on('show.bs.dropdown', function () { // do something… }) Defines the edge the menu is aligned to. If true, automatically focus dropdown el for keyboard. If true, constrainWidth to the size of the dropdown activator. Provide an element that will be the bounding container of the dropdown. If false, the dropdown will show below the trigger. If true, close dropdown on item click.

Keyboard-navigable JavaScript widgets, The order in which elements gain focus when using a keyboard, is the source To do this, authors can set tabindex to any positive number. tabindex attribute, Focusable with mouse or JavaScript via element.focus(), Tab navigable For grouping widgets such as menus, tablists, grids, or tree views, the  Dropdown Elements. The w3-dropdown-hover class defines a hoverable dropdown element.. The w3-dropdown-content class defines the dropdown content to be displayed.

tabindex, The user won't be able to focus any element with a negative tabindex using the keyboard, but a script can do so by calling the focus() method. If you set the tabindex attribute on a <div> , then its child content cannot be scrolled <​marquee> · <menu> · <menuitem> · <meta> · <meter> · <multicol> · <nav>  Learn how to create a hoverable dropdown menu with CSS. A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list: Create a dropdown menu that appears when the user moves the mouse over an element. Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element.

Comments
  • thanks it works! But when we click on this menu, for example for selecting the <input> box, the dropdown menu disappears... Can we disable auto-disappearing of dropdown... And set disappearing only when we click outside of the dropdown
  • Sure, just make the click event return false for that input. $('#ha').click(function(){return false;}); jsfiddle.net/rzsmdg4f/11
  • Thanks @TravisJ. You can already see this in action here : bigpicture.bi/jjwpi6 ! :) The 'Generate new URL when saving' doesn't work yet...
  • Do you know how to remove the default Boostrap-like highlight of the <input>, when it has focus ?
  • #ha:focus{ transition:none; box-shadow:none; border:default; }
  • thanks as well! Do you know why the dropdown disappears when we click on the input? Could we disable this, and make the dropdown disappear only when we click outside ?
  • you'll need to stop the propagation. i added this on my answer.
  • Was working on an answer to this also, but since you beat me to it... just wanted to add, I don't think the problem is because it isn't visible yet. If you place an input outside of the menu (that is always visible) and try to set focus to it, it also doesn't work. I think something about the drop-down menu is taking the focus on click (after the click event returns). You could possibly watch for a focus event or mouse-up event instead, but I'd just go with the setTimeout, it works.
  • If you are going to add more input fields to that dropdown (or others) I would target $('.dropdown-menu input') instead of just the single input element. Just a thought.
  • Please include some code (ideally with a runnable "code snippet") for this answer to be useful.