Search not auto focusing in jQuery 3.6.0 #5993
Comments
|
same here! |
|
Hello, similar problem here the search doesn't focus at all with jQuery 3.6.0, this make the search impossible. I had to downgrade jQuery to a lower version to make it work. |
|
I'm not sure if this is a different issue but I can't search (won't focus the input) at all when the select2 dropdown is within a modal. Works fine when not in a modal (it doesn't auto-focus but it does focus if you click on the input). |
|
I think it has something to do with the fix for focus as noted in the jq 3.6 blog post. Fixes elem1.on( "focus", function() { |
|
Same issue here on jQuery 3.6 |
|
Just spent 3 hours debugging this very issue ... wish I was smart enough to check here first! 😭 |
|
This is an issue also in 4.1.0.rc-0 Ref: jquery/jquery#4382 |
Revert when select2/select2#5993 is fixed
Revert when select2/select2#5993 is fixed
Revert when select2/select2#5993 is fixed
|
Triggering a 'focus' on the ".select2-search__field" in the "select2:open" event seems like a workaround. |
|
i have been trying to fix this with multiple solutions like @blq mentioned, but no form of /*
* Hacky fix for a bug in select2 with jQuery 3.6.0's new nested-focus "protection"
* see: https://github.com/select2/select2/issues/5993
* see: https://github.com/jquery/jquery/issues/4382
*
* TODO: Recheck with the select2 GH issue and remove once this is fixed on their side
*/
$(document).on('select2:open', () => {
document.querySelector('.select2-search__field').focus();
}); |
|
same here, select2 4.1.0-rc0 and jquery 3.6.0 fiddle |
|
Failing for me, too. Here's a small repro. To see it work with jQuery 3.5.1, toss it in a file, open a browser, and click on the |
|
@ioki-klaus Yes, forgot to say that you had to use native event focus triggering. I think the biggest hack is that there's no good way to find the search-field via the select2 object API? A global query would be a bug if you have multiple select2-instances on the page. In the common case of using element IDs I used |
|
Any news or this? |
This one fixed the issue with Jquery 3.6.0 and select2 4.0.13. I'm using select2 in custom CMS and open dropdowns hundreds of times a day, so your solution was extremely useful for me. Thank you! |
@blq I did not look into it too deeply, but inspecting the DOM, the code for the popup window gets injected into the DOM, when the select2 input is opened. So, on my side, even if I have a bunch of select2-fields on the same page, there is only ever one |
…effects search select dropdowns see upstream issue select2/select2#5993
|
I'm using multiple Select2 fields and the workaround provided would work only half of the time for some reason. My workaround was to use the dropdownParent option for each one and create a DIV with a name that uses that element's ID. This works even when I use |
Just a quick update - after some more testing, I found it only works if page has one select2 dropdown. If there are many dropdowns, this fix always autofocus on the first dropdown, which means that if you open 2nd dropdown and start typing, search is initialized in the 1st dropdown. Another update: discovered that autofocus only has problems with non-multiple selects. In other words, if dropdown has |
My workaround works for more than one select2 box however I have seen a bug where it visually looks like it focuses the 2nd select2 but upon typing/searching it will actually be selecting for the first one... very trippy honestly but for my purposes it works good enough for now. I hope either Jquery or Select2 roll out an update to fix this officially. |
|
open modal and focus select, for me it worked this code $('#name_modal').modal('show').on('shown.bs.modal', function(){ |
|
Wow..... I just came across this. How has this been an issue for so long? |
|
I think many people just downgraded their jQuery dependency back to 3.5.1 when this popped up, or had some other workaround. This issue has been fixed with jQuery 3.6.1 as far as I know. |
Unfortunately it wasn't: #5993 (comment) It is still an issue on 3.6.3: https://jsfiddle.net/tagliala/ro3v807f/1/
Because it is not trivial to fix. Fortunately, a lot of workarounds have been kindly shared in comments here. I think that a possible solution could be the one used by jQuery UI in jquery/jquery-ui#1946 (but I'm not a JavaScript developer, I may be terribly wrong) |
|
Linking to PR: #6044 |
|
Same to me... i used
showing this error, when i click select2 on bootstrap modal jquery-3.6.3.min.js:2 |
|
The issue is likely fixed by jquery/jquery#5224 which will be included in jQuery 3.7.0. You can check if this fixes your issues now by trying the jQuery 3.x git build from: https://releases.jquery.com/jquery/ (please don't use this version in production, though!). Please test and report if this works. The more confirmations we have about this fixing various focus-related issues, the more confident we can be we're on a good path. The test case from #5993 (comment) with jQuery 3.x git seems to be working fine: https://jsfiddle.net/m_gol/xdcfvjag/ |
|
I've just tested and in my settings it indeed works well with 3.x git! This is better than having a patched version of select2, thanks! |
|
Ignore my previous comment (deleted), 3.x does indeed fix all focusing issues. Hurrah! |
|
jQuery 3.7.0 with @pierre-alain-b @davequested Thanks for confirming it works! |
|
Hurrah! Thank you! @ryanb I therefore recommend to close this issue and recommend to use 3.7 and not 3.6 branch for jQuery |
|
@pierre-alain-b @mgol thanks! Closing this issue since jQuery 3.7 fixes it. |
|
Hi folks - although this does appear to be fixed with jQuery 3.7.0 I've been trying to write a test case for it. That's partly to avoid future regressions, and partly because it'd be nice to upgrade the vendored jQuery3-variant used in the unit tests (vendored jQuery1 and jQuery2 lineages are also vendored within The test I've developed so far unexpected passes when using jQuery 3.6.3 (a version where commentors have confirmed that the focus problem still exists). I'd like to develop an illustrative test case that passes with jquery1 and jquery2, and that fails for jquery3 versions starting with 3.6.0 and passes again at version 3.7.0 and beyond. Can anyone tell whether I'm doing something obviously (or not obviously) wrong in the test code below? Thanks for your help! test('open sets the focus to the search control', function (assert) {
var $container = $('#qunit-fixture .event-container');
var container = new MockContainer();
var selection = new DropdownSearch(
$('#qunit-fixture .single'),
options
);
var $selection = selection.render();
selection.bind(container, $container);
$container.append($selection);
var $search = $selection.find('input');
assert.notEqual(
document.activeElement,
$search[0],
'The selection had focus originally'
);
container.trigger('open');
assert.equal(
document.activeElement,
$search[0],
'After close, focus must be set to selection'
);
});To run tests for this repository, you can invoke: |
|
@jayaddison I can't help with the exact test code as I'm unaware of select2 internals but the actual issue fixed here was most likely You can see the test case I added for this in my fixing PR: Posting the test contents here as well for easier reference: QUnit.test( "trigger(focus) works after focusing when hidden (gh-4950)", function( assert ) {
assert.expect( 1 );
var input = jQuery( "<input />" );
input.appendTo( "#qunit-fixture" );
input
.css( "display", "none" )
.trigger( "focus" )
.css( "display", "" )
.trigger( "focus" );
assert.equal( document.activeElement, input[ 0 ], "input has focus" );
} ); |
|
Thank you, @mgol. I'll experiment with the visibility of the relevant element(s) during the test. The mention of browser versions also has me wondering whether the usage of PhantomJS (webkit-based, I think) during the |
and others
I'm running Select2 4.0.13 with jQuery 3.6.0 and the search box does not auto-focus when opening select2. I believe this is caused by the "fix" in jQuery 3.6.0 related to triggering a focus event within another focus event.
See the release notes for details: http://blog.jquery.com/2021/03/02/jquery-3-6-0-released/
Update: This issue has been fixed in jQuery 3.7.
The text was updated successfully, but these errors were encountered: