In Django 4.1 the focus isn't set to the select2 input when clicking on the set filter box.

[selected-pixel-jameson]

There is a UX issue when I click on the filter the select2 input field doesn't gain focus. I'm unable to tab to put focus down to that field either. I have to use the mouse to manually click on that second input field in the drop down after I just clicked on the input.

Notice in this screenshot how there is no cursor in the second input?

And this is from our current production site. Notice how the cursor is showing in the screenshot?

While this seems like a insignificant issue it is actually rather large because end-users of the admin panel are using this filter very often and having to make a secondary click is just going to cause issues. I would be willing to submit a pull request for this, but I'm not even sure where to start.

Thank you.

[madeyoga]

this seems like an issue from django autocomplete widget.

For now, I think you can write a custom js to set the focus manually. for instance with jquery:

function setFocus(event) {
    const el = event.currentTarget
    const isOpen = el.getAttribute("aria-expanded") === "true"
    if (isOpen) {
        document.querySelector(".select2-search__field").focus()
    }
}

$('.select2-selection').click(function (event) {
    setFocus(event)
})

$('.select2-selection').keyup(function (event) {
    if (event.keyCode == 13) {
        setFocus(event)
    }
})

[selected-pixel-jameson]

@madeyoga Are you referring to the django-autocomplete-light package?

[FloppyDisco]

@madeyoga 's solution did not work for me. the aria-expanded is on a nested element, this is what worked for me.

function setFocus(event) {
  const element = event.currentTarget;
  const isOpen = element.classList.contains("select2-container--open");

  if (isOpen){
    $(".select2-search__field").get(0).focus();
  }
}