Bootstrap-select: Dropdown not closing when you tab into field, type and hit enter

[uiuxdeveloper]

Not sure how to bug this, but here is the scenario I ran into:

• initialize bootstrap-select with a container bound to the body
• create a form with an input text field before the select dropdown
• tab through the form and into the select field
• start typing, which will open the dropdown and highlight the option
• hit enter and tab out

• The result is that the select box does not close
• In some instances the dropup vs dropdown doesn't handle nicely

DEBUGGING REVEALED
• bootstrap toggle doesn't get properly called and set because the parent isn't properly. dropdown.js sets the class of the parent to open and aria-expanded to true. The toggle controller uses these to correctly determine the open/close state. When bootstrap-select builds the option list outside of the parent using container it has a problem finding the parent and the classes are not set. This of course leads to inconsistent behavior and breaks tabbing and keydown behavior.

[kjhangiani]

I'm experiencing a similar issue, and you can actually see it on the demo itself:

http://silviomoreto.github.io/bootstrap-select/

There is inconsistent behavior when hitting the 'tab' key on selects vs multiselects.

On the demo, click the first dropdown, then start hitting tab - on selects, it will tab through the options, and the dropdown will not close when the tab cycles through all the options to the next dropdown (at least until you hit the 'down' key to expand the next one)

If you keep hitting tab until you get to a multiselect, you'll notice two differences:

• whether the multiselect dropdown is open or closed, tab will immediately jump to the next input, without cycling through the options (on selects, if expanded, it will cycle through the options)
• when tabbing away from a multiselect, the dropdown immediately closes (on selects, the dropdown remains open when tabbing away)

This is causing issues on our form as there is a mixture of selects and multiselects and the behavior is inconsistent. I actually prefer the multiselect behavior - tab should not cycle through the options, and tabbing away from a select should immediately close the dropdown (both of which parallel a regular html select/multiselect).

The second one is by far the more significant issue, for sure the dropdown should close when tabbing away from it (just like a regular HTML select does). The first issue should just be made consistent on both selects and multiselects - either tab cycles through the options on both, or on neither.

[nickjohnson]

This has become an issue for us as well. We implement the dropdown on an ecommerce site. On a state dropdown we have users tabbing through and selecting the first letter and then tabbing to the next field without hitting enter. The result is orders are coming in with Alabama as this is the first option in the default. The zip matches other states.

Is there a fix scheduled for this issue? Or do we need to implement a fix ourselves?

[nickjohnson]

Thanks Casey, it's close, the tabbing works, but the new item is not selected when tabbing is advanced. The enter/return still has to be tapped in order to select the new option. For example:

When I tab into the select, press the down arrow key, the menu opens so I can navigate to a new option. Perfect, then when I click tab again, it advances to the next input, perfect. But it leaves the menu open without the new item selected.

[caseyjhol]

Give it a shot now. Also, be sure to have selectOnTab set to true.

[weilinzung]

@caseyjhol I also have a problem, selectOnTab seems not working anymore.