I figured out a workaround:

I set a tabindex=0 on the parent .form-group.

$(document).ready(function () {
    ...
    var $selects = $('select');
    if ($selects.length > 0) {
        for (var i = 0; i < $selects.length; i++) {
            $($selects[i]).parents('.form-group').attr('tabindex', '0');
        }
    }
});

$(document).on('turbolinks:load', function () {
    ...
    $(document).on('focus', '.form-group', function (e) {
        $(document).on('keydown', $(e.target), function(e) {
            if (e.which == 13) {
                $(e.target).find('select').select2('open');
            }
        });
    });
}

$.fn.select2 && $('[data-init-plugin="select2"]', context).each(function () {
            $(this).select2({
                minimumResultsForSearch: ($(this).attr('data-disable-search') == 'true' ? -1 : 1)
            }).on('select2:open', function () {
                $.fn.scrollbar && $('.select2-results__options').scrollbar({
                    ignoreMobile: false
                })
            }).on('select2:close', function(evt) { // important part
                var $target     = $(evt.target);
                var $formGroup  = $target.data('select2').$container.parents('.form-group');

                if ($formGroup.attr('tabindex')) $formGroup.focus();
            });
        });

Uh oh!

TAB should select a result #4820

Description

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions