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 …


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() {

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



Tech corner with orange background

Angular, Gatsby, Astro? Pretty hot, huh?

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

Hotovo tech corner

The Latest Tips, News, and New Features in the World of Web Development

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

Asynchronous programming Hotovo tech corner

Asynchronous Programming World (Part 1)

What will this multi-episode blog post be about? In short: …