farhan0581 / django-admin-autocomplete-filter

A simple Django app to render list filters in django admin using autocomplete widget.
GNU General Public License v3.0
351 stars 75 forks source link

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

Open selected-pixel-jameson opened 1 year ago

selected-pixel-jameson commented 1 year ago

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? Screenshot 2023-01-12 at 9 50 43 AM

And this is from our current production site. Notice how the cursor is showing in the screenshot? Screenshot 2023-01-12 at 9 55 18 AM

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 commented 1 year ago

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 commented 1 year ago

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