Atlassian connect

Annoying AUI select2 component

Atlassian connect

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

Lukas Judicak

Atlassian stream leader at Hotovo, who loves great food and beers. He likes watching Ice Hockey and Cycling in his free time if not studying the source codes of Atlassian products.

READ MORE

newsletter violet

September newsletter: News you can’t miss

Optimizing web images for real displays Did you know that …

August newsletter: HTTP/3 stuff… and much more

HTTP/3 concepts and features HTTP / 3 is supported on …

newsletter

July newsletter: Web tech summer edition

Typescript 4.4 features Another minor version of Typescript is now …