Can't focus on input after selecting on Internet Explorer


#1

Hello !
I use select2 v4.0.3 and when I use the focus() method it works perfectly on all browsers except IE. I already tried using setTimeout as a workaround but didn’t help. Here is the code :

  $(document).find('.street').on('focusout', 'input', () => {
        setTimeout(() => {
            if (focused === single) {
                $(document).on('focusout keydown', '.element', (e) => {
                    if (e.keyCode === 32 || e.keyCode === 13) {
                        setTimeout(() => {
                            e.preventDefault();
                            $streetInput.focus();   // I TRY TO SET FOCUS HERE !!   
                        }, 10);
                                                                                                          
                    } else if (e.target || e.keyCode == 27) {
                        e.preventDefault();
                        $element.remove();
                        $street.focus();
                    }
        }, 10);
    });

I use TAB key to visit each option and SPACE or ENTER key to select one. After the selection, I want focus to stay on the input. Currently the focus goes to the whole form, and also dropdown closes immediately for some reason. Does anybody know a workaround for this issue ? Thanks :slight_smile:


#2

You can prevent the dropdown from closing immediately on selection by setting the “closeOnSelect” configuration option to false.

The focus issue might be an IE-specific problem. Have you tried increasing the timeout value in your setTimeout() call (maybe to more like 150ms)?