Select2 not working with keyboard

[amastaneh]

Based on https://select2.github.io/examples.html
If you tried clicking on regular select box and press h key then Hawaii selected successfully, but if you clicking on select2 box and press any key, there's not happen (on Desktop Chrome, Edge and Firefox).

Is there any solution for enable auto searching with focus and type?

[SgtOddball]

Do you mean the hidden search box variant? As in this one?

In which case, yes you've got a point (I'd guess that without the search there's no input box to listen to keypresses for) .

[amastaneh]

NO, It's about automatic open dropdown and focus search box and put the characters in search box right after first keydown event.

[SgtOddball]

In that case I really don't follow.

Do you mean to navigate to the select box using keyboard and then keypress or use the mouse to select the box and then start typing?

If you're using the mouse to click the box then type, it works just fine on my own setup.

It might help if you could provide a snippit of what you're doing (something like 'screen to gif') as well as details such as what version of the browsers your using (ie firefox 47.0, edge 12 etc) that way it'd be easier to figure out whats happening since either it can't be replicated or the issue is not clearly described.

[teomaragakis]

@SgtOddball I think he means that the focus gets lost after you choose an option (I have the same issue too). When you select a value from the list and the list closes, you lose the focus on the outside element (.select2-container) which means that if you press tab, you won't move to the next element in the form, but it will take you to the beginning.

Obviously this is wrong from a UX point of view.

Could you confirm the issue? (It can also be seen in the examples page, first instance of select2)

[SgtOddball]

That makes more sense, in which case it's a known issue thats been looked into (see #4384 for examples and workarounds). But the loss of focus only happens once an option is selected, not pressing any key.

I was trying to get @amastaneh to clarify his problem to make it more clear as to what his issue could be. In fairness it's also not stated which version of select2 is being used so I'm also running on the assumption that it's 4.0.3.

[teomaragakis]

Anyway, I did the same fix like the one you posted on #4384 and I'm good for now.

[amastaneh]

Thank you @teomaragakis & @SgtOddball for your attentions,
The keyboard based problem was, after focused on Select2 dropdowns, search is not started with typing...

Scenario

• choose a select2 dropdown with Tab
• start typing from a to z, it's noting (no searching, no selecting ... nothing)
• typing from A to Z, it's noting (no searching, no selecting ... nothing)
• after press up, down, left, right not happen

It just start searching after press space or enter

After googling for a while, we found Chosen which is fully compatible with keyboard (arrow keys and typing after focus is working awesome).

Thank you in advanced

[SgtOddball]

Riiiight. That makes more sense, and yes I can tell whats happening straight away.

Because the tabbing action highlights the div element on the page (not the now hidden select box) it's not immediately selected if other keystrokes are detected. I'd have to have a closer look to see if there's a way to capture the element being focused on and listen for additional keypresses.

It could also be a conscious choice to ignore all other keypresses save for enter/return and spacebar.

[sibiarunachalam]

Hi all,
I encountered the same problem
It was reported 8 months ago.
Is this fixed?

[alexweissman]

If @teomaragakis's interpretation of this issue is correct, then it has been fixed in 4.0.4. See #4427.

[Roy-Orbison]

@alexweissman I don't think this bug is resolved based on the live example. @amastaneh is correct, one still cannot tab to a select2 control, start typing and/or use up and down keys to get to the option you want. E.g.: on a normal select of Australian states, I can tab into it, hit V (which shows Victoria will get selected on blur), then tab to the next control. Done. At v4.0.4 it's half way there; it only works if you first open the drop down with Space or Alt + down.

It's pretty disappointing as a lot software still ships with <= v4.0.3 which doesn't work well with keyboard even when the drop-down is open, interfering with usability & accessibility for many websites.

I second the use of Chosen for most use cases.

[cyphix333]

This still appears to be an issue.

[connecttosunil]

Hi I am too using select2 full in my project , but its not allowing left (keycode:37) and right (keycode: 39 ) arrows key to work with any input on my form , where I am using the select2 as well.

Any help in this please, why its happening.

[Roy-Orbison]

Why was this closed? The live example still has no-ops whereas a native <select> would start cycling/searching through the options from keyboard input. That makes Select2 less of an enhancement and more of an inferior replacement that's just 'prettier'.

[connecttosunil]

its has issue ,who closed it?