jQuery v3.6.0 breaks Bootstrap's test suite in IE

[XhmikosR]

Opening the issue after quickly chatting with mgol on IRC

I made a branch to update jQuery to v3.6.0 in twbs/bootstrap#33243. I notice our BrowserStack tests fail consistently on Internet Explorer 10 and 11. v3.5.1 works fine.

git clone https://github.com/twbs/bootstrap.git -b v4-dev-xmr-update-jquery
npm i
npm run js-test-cloud #assumes you have BrowserStack credentials set up

The failures seem to point to https://github.com/twbs/bootstrap/blob/v4-dev/js/tests/unit/dropdown.js#L860 and https://github.com/twbs/bootstrap/blob/v4-dev/js/tests/unit/dropdown.js#L870

EDIT: using jQuery v3.3.1 also works fine.

[mgol]

An isolated test case is basicaly:

input1.trigger('focus');
input2.trigger('focus');
input1.trigger('focus');

In IE, focus stays on input2.

See versions with jQuery:

• 3.6.0: https://output.jsbin.com/wunumej/1
• 3.5.1: https://output.jsbin.com/vuhonam/1
• 3.3.1: https://output.jsbin.com/giduboh/1

The 3.6.0 version fails in IE, the older ones succeed.

jQuery 3.4 should be similar to 3.5 as there weren't major changes in relevant areas.

I think this is the same bug that makes some tests fail in jQuery UI only with jQuery 3.6.0+:

• 3.6.0: http://swarm.jquery.org/job/10970
• 3.5.1: http://swarm.jquery.org/job/10969

Also related to #4856, although that issue manifests itself in all 3.4+ versions.

[timmywil]

We'll address this in a patch. Related: dbcffb3

[gibson042]

@mgol The idea discussed in today's weekly meeting:

 // Ensure the presence of an event listener that handles manually-triggered
 // synthetic events by interrupting progress until reinvoked in response to
 // *native* events that it fires directly, ensuring that state changes have
 // already occurred before other listeners are invoked.
 function leverageNative( el, type, expectSync ) {
+	var result = {}, queue = [];
 
 	// Missing expectSync indicates a trigger call, which must force setup through jQuery.event.add
 	if ( !expectSync ) {
 		if ( dataPriv.get( el, type ) === undefined ) {
 			jQuery.event.add( el, type, returnTrue );
 		}
 		return;
 	}
 
 	// Register the controller as a special universal handler for all event namespaces
 	dataPriv.set( el, type, false );
 	jQuery.event.add( el, type, {
 		namespace: false,
 		handler: function( event ) {
-			var notAsync, result,
-				saved = dataPriv.get( this, type );
+			var forceSync,
+				i = 0,
+				length = queue.length,
+				oldResult = result;
 
 			if ( ( event.isTrigger & 1 ) && this[ type ] ) {
 
 				// Interrupt processing of the outer synthetic .trigger()ed event
-				// Saved data should be false in such cases, but might be a leftover capture object
-				// from an async native handler (gh-4350)
-				if ( !saved.length ) {
+				if ( !event.isInner ) {
 
 					// Store arguments for use when handling the inner native event
-					// There will always be at least one argument (an event object), so this array
-					// will not be confused with a leftover capture object.
-					saved = slice.call( arguments );
-					dataPriv.set( this, type, saved );
+					queue.push( slice.call( arguments ) );
 
 					// Trigger the native event and capture its result
 					// Support: IE <=9 - 11+
 					// focus() and blur() are asynchronous
-					notAsync = expectSync( this, type );
+					forceSync = expectSync( this, type );
 					this[ type ]();
-					result = dataPriv.get( this, type );
-					if ( saved !== result || notAsync ) {
-						dataPriv.set( this, type, false );
-					} else {
-						result = {};
-					}
-					if ( saved !== result ) {
+					if ( result === oldResult && !forceSync ) {
+						result = {};
+					}
+					if ( result !== oldResult ) {
 
 						// Cancel the outer synthetic event
 						event.stopImmediatePropagation();
 						event.preventDefault();
 
 						// Support: Chrome 86+
 						// In Chrome, if an element having a focusout handler is blurred by
 						// clicking outside of it, it invokes the handler synchronously. If
 						// that handler calls `.remove()` on the element, the data is cleared,
 						// leaving `result` undefined. We need to guard against this.
 						return result && result.value;
 					}
 
 				// If this is an inner synthetic event for an event with a bubbling surrogate
 				// (focus or blur), assume that the surrogate already propagated from triggering the
 				// native event and prevent that from happening again here.
 				// This technically gets the ordering wrong w.r.t. to `.trigger()` (in which the
 				// bubbling surrogate propagates *after* the non-bubbling base), but that seems
 				// less bad than duplication.
 				} else if ( ( jQuery.event.special[ type ] || {} ).delegateType ) {
 					event.stopPropagation();
 				}
 
 			// If this is a native event triggered above, everything is now in order
 			// Fire an inner synthetic event with the original arguments
+			// for each queued event, and capture the last result
-			} else if ( saved.length ) {
+			} else if ( length ) {
 
-				// ...and capture the result
-				dataPriv.set( this, type, {
+				for ( ; i < length; i++ ) {
+				result = ( {
 					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 ),
+						jQuery.extend( queue[ 0 ][ 0 ], jQuery.Event.prototype, { isInner: true } ),
+						queue.shift().slice( 1 ),
 						this
 					)
 				} );
+				}
 
 				// Abort handling of the native event
 				event.stopImmediatePropagation();
 			}
 		}
 	} );
 }

The concept should be sufficient to invoke handlers as expected, even with code like input1.trigger('focus', 0); input2.trigger('focus'); input1.trigger('focus', 1).

[mgol]

@gibson042 Thanks! Do you want to put that in a PR or just to provide a starting point for others to pick up?

[ghost]

oddly we are experiencing similar issue in chrome, where's user has to doubleclick in order to refocus on elements with content editable. We had to move from 3.4.1 to 3.6

[mgol]

@Novolokov do I understand it right that you didn't have the issue in 3.4.1 but you have one on 3.6.0? Any chance for a test case? If you have one, please open a separate issue.

[ghost]

@mgol, sorry too difficult to isolate. used this to fix it https://stackoverflow.com/a/17384592

[mgol]

It looks like we can fix this via simulating the async focus & blur in IE via their bubbling but also synchronous equivalents: focusin & focusout. In other browsers, all those events are synchronous.

PRs for:

• jQuery 4.0: Event: Simulate focus/blur in IE via focusin/focusout #5223
• jQuery 3.x: Event: Simulate focus/blur in IE via focusin/focusout (3.x version) #5224

[mgol]

Fixed on main (future 4.x) via #5223 and on 3.x-stable via #5224.

[mgol]

@XhmikosR could you check whether https://releases.jquery.com/git/jquery-3.x-git.js works for you? This should be more or less what we'll release as jQuery 3.7.0.

[XhmikosR]

If there was an npm pre-release that would be easier :) I can try manually later but it's been a while since we touched our v4-dev branch. Let's hope things still work.

…

On Tue, Apr 4, 2023, 19:05 Michał Gołębiowski-Owczarek < ***@***.***> wrote: @XhmikosR <https://github.com/XhmikosR> could you check whether https://releases.jquery.com/git/jquery-3.x-git.js works for you? This should be more or less what we'll release as jQuery 3.7.0. — Reply to this email directly, view it on GitHub <#4859 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACVLNP376WYQUNAH2L3PZTW7RBDZANCNFSM4ZGXG4LA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[mgol]

I understand, but my hope was to check before we release. 😉 Our release process is quite complex, so we don’t do a lot of pre-releases for minor updates.

FWIW, I did test manually using steps you provided above with jQuery swapped for the 3.x-git version and they passed. Is there anything else to test?

[XhmikosR]

If you tried the following and works on BrowserStack then it should be fine:

git clone https://github.com/twbs/bootstrap.git -b v4-dev
npm i
# change the jquery version to the one you want to test
npm run js-test-cloud #assumes you have BrowserStack credentials set up

[mgol]

Yes, that’s what I did. It looks like we’re good then!

[XhmikosR]

Perfect, thanks for fixing the issue!

[mgol]

@XhmikosR jQuery 3.7.0 has been released, you should be able to update it in Bootstrap v4 now.

https://blog.jquery.com/2023/05/11/jquery-3-7-0-released-staying-in-order/