Annoying AUI select2 component

Maybe you know the situation when you create a form with a standard HTML select element and then you change it to the AUI select2 component. Everything looks shiny and works smoothly. Later you create another form with one or more select elements and you change it to the select2 component again but it is not working now. I had the same issue with my form which contains four select2 components. The first one was not working – I mean when you click it, the input field is not focused and you cannot type in. But when click outside and try another select2 and come back to the first select2, suddenly it works ... When you test the form in many browsers like Chrome, Firefox, Safari, Microsoft Edge you come into one result – How it is possible that the select2 works only in the Edge? Nobody knows ...

Workaround

If you do not want to spend ages with complaining about the select2 component and debugging it or reading sources codes, here could be a workaround for it:

$(".select2-component").on("select2-opening", function() {
    $(this).auiSelect2("focus"));
});

You can listen on the event select2-opening and when a dropdown with input field is displayed then you will focus to it.