Atlassian connect

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.

about author

hotovo

READ MORE

hotovo tech corner cover october

The Top Latest Web Dev Tips and Updates

Hello readers! Just as we do every month, we’ve pulled …

sanae software testing beer.ex conference

Sanae Software Testing BEER.EX 2022 Impressions

We love being testers. But what do we love the …

Hotovo tech corner september

Top Tips You Don’t Want to Miss

Hello readers! Just as we do every month, we’ve pulled …