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

June newsletter: Features you can’t miss

React 18 features After a long break, the React team …

Inside Nestjs project

Nestjs is an enterprise-grade backend server solution based on Node.js …

newsletter violet

May newsletter: With the right build tool, the work goes smoothly

Comparing next gen build tools Implementation of the support for …