Event: Fix focusin/focus & focusout/blur order in IE

mgol · mgol · commit c052f788343c · 2023-03-14T01:03:25.000+01:00
To preserve relative focusin/focus &amp; focusout/blur event order guaranteed
on the 3.x branch, attach a single handler for both events in IE.

A side effect of this is that to reduce size the `event/focusin` module
no longer exists and it's impossible to disable the focusin patch
in modern browsers via the jQuery custom build system.
diff --git a/README.md b/README.md
@@ -95,7 +95,6 @@ Some example modules that can be excluded are:
 - **dimensions**: The `.width()` and `.height()` methods, including `inner-` and `outer-` variations.
 - **effects**: The `.animate()` method and its shorthands such as `.slideUp()` or `.hide("slow")`.
 - **event**: The `.on()` and `.off()` methods and all event functionality.
-- **event/focusin**: Cross-browser support for the focusin and focusout events.
 - **event/trigger**: The `.trigger()` and `.triggerHandler()` methods.
 - **offset**: The `.offset()`, `.position()`, `.offsetParent()`, `.scrollLeft()`, and `.scrollTop()` methods.
 - **wrap**: The `.wrap()`, `.wrapAll()`, `.wrapInner()`, and `.unwrap()` methods.
diff --git a/src/event.js b/src/event.js
@@ -730,25 +730,41 @@ jQuery.each( {
 
 jQuery.each( { focus: "focusin", blur: "focusout" }, function( type, delegateType ) {
 
-	// Support: IE 11+
-	// Attach a single focusin/focusout handler on the document while someone wants focus/blur.
-	// This is because the former are synchronous in IE while the latter are async. In other
-	// browsers, all those handlers are invoked synchronously.
 	function focusMappedHandler( nativeEvent ) {
+		if ( document.documentMode ) {
+
+			// Support: IE 11+
+			// Attach a single focusin/focusout handler on the document while someone wants
+			// focus/blur. This is because the former are synchronous in IE while the latter
+			// are async. In other browsers, all those handlers are invoked synchronously.
+
+			// `handle` from private data would already wrap the event, but we need
+			// to change the `type` here.
+			var handle = dataPriv.get( this, "handle" ),
+				event = jQuery.event.fix( nativeEvent );
+			event.type = nativeEvent.type === "focusin" ? "focus" : "blur";
+			event.isSimulated = true;
+
+			// First, handle focusin/focusout
+			handle( nativeEvent );
+
+			// ...then, handle focus/blur
+			//
+			// focus/blur don't bubble while focusin/focusout do; simulate the former by only
+			// invoking the handler at the lower level.
+			if ( event.target === event.currentTarget ) {
+
+				// The setup part calls `leverageNative`, which, in turn, calls
+				// `jQuery.event.add`, so event handle will already have been set
+				// by this point.
+				handle( event );
+			}
+		} else {
 
-		// `eventHandle` would already wrap the event, but we need to change the `type` here.
-		var event = jQuery.event.fix( nativeEvent );
-		event.type = nativeEvent.type === "focusin" ? "focus" : "blur";
-		event.isSimulated = true;
-
-		// focus/blur don't bubble while focusin/focusout do; simulate the former by only
-		// invoking the handler at the lower level.
-		if ( event.target === event.currentTarget ) {
-
-			// The setup part calls `leverageNative`, which, in turn, calls
-			// `jQuery.event.add`, so event handle will already have been set
-			// by this point.
-			dataPriv.get( this, "handle" )( event );
+			// For non-IE browsers, attach a single capturing handler on the document
+			// while someone wants focusin/focusout.
+			jQuery.event.simulate( delegateType, nativeEvent.target,
+				jQuery.event.fix( nativeEvent ) );
 		}
 	}
 
@@ -757,13 +773,24 @@ jQuery.each( { focus: "focusin", blur: "focusout" }, function( type, delegateTyp
 		// Utilize native event if possible so blur/focus sequence is correct
 		setup: function() {
 
+			var attaches;
+
 			// Claim the first handler
 			// dataPriv.set( this, "focus", ... )
 			// dataPriv.set( this, "blur", ... )
 			leverageNative( this, type, true );
 
 			if ( document.documentMode ) {
-				this.addEventListener( delegateType, focusMappedHandler );
+
+				// Support: IE 9 - 11+
+				// We use the same native handler for focusin & focus (and focusout & blur)
+				// so we need to coordinate setup & teardown parts between those events.
+				// Use `delegateType` as the key as `type` is already used by `leverageNative`.
+				attaches = dataPriv.get( this, delegateType );
+				if ( !attaches ) {
+					this.addEventListener( delegateType, focusMappedHandler );
+				}
+				dataPriv.set( this, delegateType, ( attaches || 0 ) + 1 );
 			} else {
 
 				// Return false to allow normal processing in the caller
@@ -780,8 +807,16 @@ jQuery.each( { focus: "focusin", blur: "focusout" }, function( type, delegateTyp
 		},
 
 		teardown: function() {
+			var attaches;
+
 			if ( document.documentMode ) {
-				this.removeEventListener( delegateType, focusMappedHandler );
+				attaches = dataPriv.get( this, delegateType ) - 1;
+				if ( !attaches ) {
+					this.removeEventListener( delegateType, focusMappedHandler );
+					dataPriv.remove( this, delegateType );
+				} else {
+					dataPriv.set( this, delegateType, attaches );
+				}
 			} else {
 
 				// Return false to indicate standard teardown should be applied
@@ -797,6 +832,58 @@ jQuery.each( { focus: "focusin", blur: "focusout" }, function( type, delegateTyp
 
 		delegateType: delegateType
 	};
+
+	// Support: Firefox <=44
+	// Firefox doesn't have focus(in | out) events
+	// Related ticket - https://bugzilla.mozilla.org/show_bug.cgi?id=687787
+	//
+	// Support: Chrome <=48 - 49, Safari <=9.0 - 9.1
+	// focus(in | out) events fire after focus & blur events,
+	// which is spec violation - http://www.w3.org/TR/DOM-Level-3-Events/#events-focusevent-event-order
+	// Related ticket - https://bugs.chromium.org/p/chromium/issues/detail?id=449857
+	//
+	// Support: IE 9 - 11+
+	// To preserve relative focusin/focus & focusout/blur event order guaranteed on the 3.x branch,
+	// attach a single handler for both events in IE.
+	jQuery.event.special[ delegateType ] = {
+		setup: function() {
+
+			// Handle: regular nodes (via `this.ownerDocument`), window
+			// (via `this.document`) & document (via `this`).
+			var doc = this.ownerDocument || this.document || this,
+				dataHolder = document.documentMode ? this : doc,
+				attaches = dataPriv.get( dataHolder, delegateType );
+
+			// Support: IE 9 - 11+
+			// We use the same native handler for focusin & focus (and focusout & blur)
+			// so we need to coordinate setup & teardown parts between those events.
+			// Use `delegateType` as the key as `type` is already used by `leverageNative`.
+			if ( !attaches ) {
+				if ( document.documentMode ) {
+					this.addEventListener( delegateType, focusMappedHandler );
+				} else {
+					doc.addEventListener( type, focusMappedHandler, true );
+				}
+			}
+			dataPriv.set( dataHolder, delegateType, ( attaches || 0 ) + 1 );
+		},
+		teardown: function() {
+			var doc = this.ownerDocument || this.document || this,
+				dataHolder = document.documentMode ? this : doc,
+				attaches = dataPriv.get( dataHolder, delegateType ) - 1;
+
+			if ( !attaches ) {
+				if ( document.documentMode ) {
+					this.removeEventListener( delegateType, focusMappedHandler );
+				} else {
+					doc.removeEventListener( type, focusMappedHandler, true );
+				}
+				dataPriv.remove( dataHolder, delegateType );
+			} else {
+				dataPriv.set( dataHolder, delegateType, attaches );
+			}
+		}
+	};
 } );
 
 // Create mouseenter/leave events using mouseover/out and event-time checks
diff --git a/src/event/focusin.js b/src/event/focusin.js
diff --git a/src/event/support.js b/src/event/support.js
diff --git a/src/jquery.js b/src/jquery.js
@@ -11,7 +11,6 @@ define( [
 	"./queue/delay",
 	"./attributes",
 	"./event",
-	"./event/focusin",
 	"./manipulation",
 	"./manipulation/_evalUrl",
 	"./wrap",
diff --git a/test/unit/support.js b/test/unit/support.js
@@ -68,7 +68,6 @@ testIframe(
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
-				focusin: false,
 				getById: true,
 				noCloneChecked: true,
 				option: true,
@@ -93,7 +92,6 @@ testIframe(
 				cors: false,
 				createHTMLDocument: true,
 				disconnectedMatch: false,
-				focusin: true,
 				getById: false,
 				noCloneChecked: false,
 				option: false,
@@ -118,7 +116,6 @@ testIframe(
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
-				focusin: true,
 				getById: true,
 				noCloneChecked: false,
 				option: true,
@@ -143,7 +140,6 @@ testIframe(
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
-				focusin: false,
 				getById: true,
 				noCloneChecked: true,
 				option: true,
@@ -168,7 +164,6 @@ testIframe(
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
-				focusin: false,
 				getById: true,
 				noCloneChecked: true,
 				option: true,
@@ -193,7 +188,6 @@ testIframe(
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
-				focusin: false,
 				getById: true,
 				noCloneChecked: true,
 				option: true,
@@ -218,7 +212,6 @@ testIframe(
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
-				focusin: false,
 				getById: true,
 				noCloneChecked: true,
 				option: true,
@@ -243,7 +236,6 @@ testIframe(
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
-				focusin: false,
 				getById: true,
 				noCloneChecked: true,
 				option: true,
@@ -268,7 +260,6 @@ testIframe(
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
-				focusin: false,
 				getById: true,
 				noCloneChecked: true,
 				option: true,
@@ -293,7 +284,6 @@ testIframe(
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
-				focusin: false,
 				getById: true,
 				noCloneChecked: true,
 				option: true,
@@ -318,7 +308,6 @@ testIframe(
 				cors: true,
 				createHTMLDocument: false,
 				disconnectedMatch: true,
-				focusin: false,
 				getById: true,
 				noCloneChecked: true,
 				option: true,
@@ -343,7 +332,6 @@ testIframe(
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
-				focusin: false,
 				getById: true,
 				noCloneChecked: true,
 				option: true,
@@ -368,7 +356,6 @@ testIframe(
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
-				focusin: false,
 				getById: true,
 				noCloneChecked: true,
 				option: true,
@@ -393,7 +380,6 @@ testIframe(
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
-				focusin: false,
 				getById: true,
 				noCloneChecked: true,
 				option: true,
@@ -418,7 +404,6 @@ testIframe(
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
-				focusin: false,
 				getById: true,
 				noCloneChecked: true,
 				option: true,
