Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Scroll back to the input field when lost focus (after select2:closing)
See original GitHub issuePrerequisites
- I have searched for similar issues in both open and closed tickets and cannot find a duplicate
- The issue still exists against the latest
masterbranch of Select2 - This is not a usage question (Those should be directed to the community)
- I have attempted to find the simplest possible steps to reproduce the issue
Steps to reproduce the issue
There is jsfiddle with complete example page: https://jsfiddle.net/1hw1250x/
- Open fiddle link
- Click on select2 field. It should open with suggestions. Do NOT select anything
- Scroll down to the gray square
- Click on the square
Expected behavior and actual behavior
When I follow those steps, I see the page is scrolled to the top (where select2 element is present)
I was expecting not to scroll and still see gray square
Environment
Browsers
- Google Chrome
- Mozilla Firefox
- Internet Explorer
Operating System
- Windows
- Mac OS X
- Linux
Libraries
- jQuery version: 2.2.4
- Select2 version: 4.0.3
Isolating the problem
- The bug happens consistently across all tested browsers
- This bug happens when using Select2 without other plugins
- I can reproduce this bug in a jsfiddle
Issue Analytics
- State:
- Created 6 years ago
- Comments:6 (5 by maintainers)
Top Results From Across the Web
Select2 open dropdown on focus - Stack Overflow
The following code will open the menu on the initial focus, but won't get stuck in an infinite loop when the selection re-focuses...
Read more >How to use .focus() on a Field - Support and Troubleshooting
1. In the console, use "var element = g_form. · 2. Now enter "element;" into the console and you should see an HTML...
Read more ><input> should scroll its text to the start on blur/lose focus
Either tab to the next text box or click on the "Something to Click" button. The ellipsis does not appear until after tabbing...
Read more >.focusout() | jQuery API Documentation
The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the...
Read more >Detecting when focus leaves a group of elements with vanilla JS
Let's say you have a group of form inputs, and you want to do ... is the field that just lost focus, and...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I can reproduce this behavior. I’m kind of confused though, because #4971 seems to be saying the exact opposite thing.
+1
This is really bad UX. If user scrolls and place his focus inside other form field, the screen will be scrolled back where select2 element is.
Commenting out this line https://github.com/select2/select2/blob/04d582123d2df55c2b6b43c74c04d3d43f7dffd5/dist/js/select2.full.js#L1407 resolves this issue, I’m not sure why is this added? Is it necessary for something else?