jQuery 3.4.0+ silences native focus handlers attached after jQuery ones

Description

This may be related to the dicussion/resolution for #4856, but is a distinct issue.

If you have a Google Address autocomplete input, and trigger focus programatically (e.g. $('input').trigger('focus')) the autocomplete works fine. However, if you add any other focus event listener (event just an empty function, like $('input').on('focus', function() {})) then the autocomplete won't work until manually focused (e.g. through clicking or tabbing).

Link to test case

Test case is at https://jsfiddle.net/bgmrujdt/1/. First autocomplete has a focus event handler, focusing by clicking the button does not work. Second autocomplete doesn't have a focus event handler, focusing by clicking the button does work.

The same code with jQuery 3.3.1 works fine (example at https://jsfiddle.net/bgmrujdt/2/). It also works fine using native javascript .focus() instead of jQuery (https://jsfiddle.net/s2zmhb9t/)

Thanks for the report and the test case! Looks like a real issue that we should investigate along other focus-related issues.

I'm going to tentatively set the milestone to 3.6.1 mostly so that we look at it before the release but it's not guaranteed to be fixed there, especially as we still need to discover the cause.

The issue is reproducible without third party libraries. Attaching a jQuery focus handler on an element makes native handlers attached later not fire at all:

<input id="input">
<button id="button">Run the test</button>

var $button = $("#button");
var $input = $('#input');
var input = $input[0];

input.addEventListener('focus', function () {
	console.log('native focus handler 1');
});

$input.on("focus", function () {
	console.log("jQuery focus handler");
});

input.addEventListener('focus', function () {
	console.log('native focus handler 2');
});

$("#button").on("click", function () {
	$input.trigger("focus");
});

Only native focus handler 1 & jQuery focus handler will be logged.

Test case: https://jsbin.com/wupovat/1/edit?html,js,console,output

The reason is most likely the event.stopImmediatePropagation() call at the end of this block:

jquery/src/event.js

Lines 580 to 598 in cff2899

    
           // If this is a native event triggered above, everything is now in order 
        
           // Fire an inner synthetic event with the original arguments 
        
           } else if ( saved.length ) { 
        
           	// ...and capture the result 
        
           	dataPriv.set( this, type, { 
        
           		value: jQuery.event.trigger( 
        
           			// Support: IE <=9 - 11+ 
        
           			// Extend with the prototype to reset the above stopImmediatePropagation() 
        
           			jQuery.extend( saved[ 0 ], jQuery.Event.prototype ), 
        
           			saved.slice( 1 ), 
        
           			this 
        
           		) 
        
           	} ); 
        
           	// Abort handling of the native event 
        
           	event.stopImmediatePropagation(); 
        
           }

This issue is not fixed by my PR #5223 which otherwise fixes a number of other focus issues.

BTW, since the click event uses leverageNative, it suffers from the same issues: https://jsbin.com/katowor/1/edit?html,js,console,output

Event: Make trigger(focus/blur/click) work with native handlers

PR: #5228

Event: Make trigger(focus/blur/click) work with native handlers

Navigation Menu

Repository navigation

jQuery 3.4.0+ silences native focus handlers attached after jQuery ones #5015

Description

Link to test case

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	// If this is a native event triggered above, everything is now in order
	// Fire an inner synthetic event with the original arguments
	} else if ( saved.length ) {

	// ...and capture the result
	dataPriv.set( this, type, {
	value: jQuery.event.trigger(

	// Support: IE <=9 - 11+
	// Extend with the prototype to reset the above stopImmediatePropagation()
	jQuery.extend( saved[ 0 ], jQuery.Event.prototype ),
	saved.slice( 1 ),
	this
	)
	} );

	// Abort handling of the native event
	event.stopImmediatePropagation();
	}

jQuery 3.4.0+ silences native focus handlers attached after jQuery ones #5015

Description

Description

Link to test case

Activity

mgol commented on Feb 21, 2022

mgol commented on Mar 17, 2023

mgol commented on Mar 20, 2023

mgol commented on Mar 26, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions