Select2 not working with keyboard

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:15 (1 by maintainers)

github_iconTop GitHub Comments

5reactions
amastanehcommented, Aug 8, 2016

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

4reactions
teomaragakiscommented, Aug 8, 2016

@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)

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to get Select2 select via keyboard up-down before ...
What I want is to display the images as I navigate through the list with up and down keys. The currently blue highlighted...
Read more >
Common problems - The jQuery replacement for select boxes
Select2 does not function properly when I use it inside a Bootstrap modal. This issue occurs because Bootstrap modals tend to steal focus...
Read more >
select2 v4 does not allow you to begin typing immediately on ...
In version 4.0 when you tab to the select2 (it has focus) when you begin typing nothing happens! You have to hit RETURN...
Read more >
After remove search box in select2 keyboard select option not ...
HTML : After remove search box in select2 keyboard select option not working [ Beautify Your Computer ...
Read more >
Post Form that has Dropdowns using JQuery Select2 ... - Toolset
Beda helped me with the issue of a CRED Post Form losing the tabbing order when using keyboard navigation on a Select2 dropdown....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found