I just realized this may be a breaking change for a lot of people. If they've gone this long using select2 with the assumption that TAB should not select, changing it may mess their surrounding navigation code up.

One scenario I found is when the user tabs to the dropdown, I have the dropdown automatically open up so they can start typing, but when you call open, the first option is already highlighted, so if you hit TAB again (with the desire to skip the field and leave it blank), you can't do it because it will now select that first highlighted option. You'd be forced to use the mouse to then clear it.

This reminds me of the other issues that mention the desire for a blank first option.

If they've gone this long using select2 with the assumption that TAB should not select, changing it may mess their surrounding navigation code up.

We have a minor release coming up soon which will feature some of these small-but-important somewhat-breaking changes so I'm comfortable knowing that.

I have the dropdown automatically open up so they can start typing

Custom UX behaviours aren't our concern.

You'd be forced to use the mouse to then clear it.

Good news! This is one of the places where Select2 is accessible through a keyboard.

you can't do it because it will now select that first highlighted option

A fun feature request which could help here is to provide the keyboard event data to the select event, so you could detect that case and prevent the selection.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Changed tab key press to behave the same as enter key and select the highlighted option. This is consistent with modern browser behavior for <select> elements.

#4820

@joepetrakovich thx i appreciate the PR. question: is there a way of adding the minor code changes in your PR so that it overrides the existing functionality in src/js/select2/core.js? any pointers would be much appreciated.

@BKSpurgeon if you use the non-minified version of the library you can just do a text search for some of the lines I changed (like key === KEYS.ESC) and make the same change yourself. Is that what you are asking?

Hi @joepetrakovich appreciate the response. Was wanting to know if there was a way to quickly override the original core functionality provided by select2: (i'm getting it from a yarn / npm package so presumably that package is not minified): if that is true, then is there a way to retain the original package and specifically override those 1 or 2 lines of code?

@BKSpurgeon In the intermediate, I've been using using the events system:

mySelect2Widget.on('select2:select', function (e) {
  $(this).focus();
});

@BKSpurgeon In the intermediate, I've been using using the events system:

mySelect2Widget.on('select2:select', function (e) {
  $(this).focus();
});

@devkinetic thx - do you have the context / larger code snippet of where to place the code? Not sure if i'm doing the right thing, but i couldn't get the above to work.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@BKSpurgeon Sorry, i don't check github as often as I should. To follow up from my example mySelect2Widget is selector for an element with select2() applied to it.

var mySelect2Widget  = $('.css-class-to-target');
mySelect2Widget.on('select2:select', function (e) {
        $(this).focus();
      });

Reopening this for another stale cycle before the next release. Need to double check on ARIA for this before reviewing it.

ARIA has zero guidance on this front so I'm going to default back to selectWoo and how the browser implements it. So this PR looks good and will land for the 4.1.0 release candidate.

I noticed that if you navigate through web form with TAB keys (ARIA behaviour) and you are landing on select2 (multiple items) you get stacked in select2. TAB doesn't allow you to get to the next form field. This shouldn't happen. I'm missing something?