Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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 this issue Jan 16, 2023 · 2 comments

Comments

@selected-pixel-jameson
Copy link

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.

@selected-pixel-jameson selected-pixel-jameson changed the title Django 4.0 doesn't place focus on Select2 input. In Django 4.1 the focus isn't set to the select2 input when clicking on the set filter box. Jan 16, 2023
@madeyoga
Copy link

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants