jQuery 3.4.0+ silences native focus handlers attached after jQuery ones

[IanSimpson]

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/)

[mgol]

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.

[mgol]

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.

[mgol]

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

[mgol]

PR: #5228