Enforce Focus Select2 Modal - Javascript

Introduction

The Enforce Focus Select2 Modal is a Javascript component that enforces focus on the Select2 modal dialog. This component ensures that the user is able to interact with the modal dialog using the keyboard in case they are unable to use their mouse.

Usage

To use Enforce Focus Select2 Modal in your project, follow these steps:

1. Download the enforcefocus.select2.modal.js file from the Github repository.

2. Include the file in your HTML file.

   <script src="path/to/enforcefocus.select2.modal.js"></script> 
   

3. Initialize the component inside your application's Javascript code.

   $('#select2').select2({
       // ...
   }).on('select2:open', function() {
       enforceFocusSelect2Modal($(this));
   });
   

   Ensure that the enforceFocusSelect2Modal function is called inside the select2:open event.

Code Snippet

function enforceFocusSelect2Modal(select2$) {
    var modal = select2$.data('select2').dropdown.$dropdown[0];
    modal.setAttribute('aria-modal', 'true');
    modal.setAttribute('aria-hidden', 'false');
  
    select2$.on('keydown', function(e) {
        var $focused = $(document.activeElement);
        var $select2 = $(e.currentTarget);
  
        if (!$focused.hasClass('select2-search__field') && !$select2.hasClass('select2-container--open')) {
            $select2.select2('open');
            return;
        }
  
        if (e.which === $.ui.keyCode.TAB && $select2.hasClass('select2-container--open')) {
            var $options = $('.select2-results__option:visible', $select2);
            var index = $options.index($options.filter(':focus'));
            var lastOptionIndex = $options.length - 1;
            
            if (index === -1) {
                return;
            }
  
            if ((e.shiftKey && index === 0) || (!e.shiftKey && index === lastOptionIndex)) {
                $select2.select2('close');
            }
        }
    });
}

Conclusion

The Enforce Focus Select2 Modal is a simple, yet effective component that enables users to interact with the modal dialog of Select2 using the keyboard. With minimal setup and integration, the component can be easily added to your project to improve accessibility and user experience.