Repository navigation
You cannot programmatically focus an element after removing its focus handler #4867
Description
Description
I'm seeing this in the latest chromium browsers Windows Chrome & Edge 89, using jquery 3.6.
If you add and remove an element's focus handler, subsequent calls to $element.focus(), will do nothing.
HTML:
<div tabindex="-1" class="fdiv"></div>CSS:
.fdiv{
height:100px;
width:100px;
border:1px solid black;
}
.fdiv:focus{
background-color:green;
}See the linked to test case below. I have a simple div that turns green when you focus it and some js that will focus said div after 2 seconds.
Before setting this timeout I add and then immediately remove an empty focus handler:
//Using https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
const $origDiv = $('.fdiv');
// Comment out the following line to fix
$origDiv.on('focus',function(){}).off('focus');
setTimeout(function(){
$origDiv.focus();
},2000)If you run the fiddle, the div should turn green (gain focus) after 2 seconds, but it doesn't!
If you comment out the focus handler line, all works as expected.
Link to test case
https://jsfiddle.net/JoolsCaesar/ut371acd/
EDIT by @mgol: I fixed syntax highlighting in code blocks.
Activity
JoolsCaesar commentedon Mar 29, 2021
FWIW I tracked this down to this bit in jquery:
dataPriv.get( el, type ), whereelis the element we're attempting to focus and type is'focus', returnsfalse, so we just drop out without doing anything.mgol commentedon Mar 29, 2021
Thanks for the report! The code you mentioned exists since jQuery 3.4.0, I suspect it only became a problem after #4813 landed.
JoolsCaesar commentedon Mar 29, 2021
Makes sense. I spotted this after upgrading from 3.0.0 to 3.6.0, so couldn't narrow it down much.
mgol commentedon Mar 29, 2021
I meant the bug is only reproducible in jQuery 3.6.0, it works fine in 3.5.1 despite the fact 3.5.1 contains the code you linked to. Hence, most likely it only causes the issue in connection with #4813 (although I haven't verified it yet).
Event: Don't break focus triggering after `.on(focus).off(focus)`
mgol commentedon May 7, 2021
PR: #4885
Event: Don't break focus triggering after `.on(focus).off(focus)`
Event: Don't break focus triggering after `.on(focus).off(focus)`
Use native focus events insted of jQuery focus events
Use native focus events insted of jQuery focus events
Use native focus events insted of jQuery focus events