Tab through elements using Enter key including select2

Question

I am using following code to tab through form elements using enter key. Problem is that this code skip select2 elements.

        $('body').on('keydown', 'input, select', function(e) {
            if (e.key === "Enter") {
                var self = $(this), form = self.parents('form:eq(0)'), focusable, next;
                focusable = form.find('input,a,select,button,textarea').filter(':not([disabled]):not([tabindex="-1"]):visible');
                next = focusable.eq(focusable.index(this)+1);
                if (next.length) {
                    next.focus();
                } else {
                    //form.submit();
                }
                return false;
            }
        });

select2 will not keep `` tag the cursor focus happens to the next select2 element, from there it is not jumping to next, there is already a keypress handled in select2

score 1 · Accepted Answer · answered Apr 05 '20 at 12:44

1

Change your keydown to keyup

  $('body').on('keyup', 'input, select', function(e)

Reason is keydown is already handled in select2 library for choosing an item

answered Apr 05 '20 at 12:44

Dickens A S

3,824
2
22
45

OP's issue is *also* that `$("select:visible")` will bypass the select2's hidden select - so the focus doesn't go *into* select2 (rather than out of) – freedomn-m Apr 05 '20 at 16:38
no, the visible is applied to all tags using `form.find('input,a,select,button,textarea')` so if there is a `input` it will be trapped, I test the code in jsfiddle is was working – Dickens A S Apr 06 '20 at 05:12
When I changed keydown to keyup the select2 does get focus, but now on pressing enter on an input the form gets submitted. – Zaheer Ahmed Apr 06 '20 at 10:29
yes, that should be a different question, you need to disable it -- https://stackoverflow.com/questions/11235622/jquery-disable-form-submit-on-enter – Dickens A S Apr 06 '20 at 10:38
Ok, thanks. I will mark this as answer and submit a new question. – Zaheer Ahmed Apr 06 '20 at 11:12

Tab through elements using Enter key including select2

1 Answers1