Attributes: Only convert true, false & an empty string

mgol · mgol · commit 2adc8e9c1073 · 2024-03-18T13:40:11.000+01:00
The HTML spec defines boolean attributes: https://html.spec.whatwg.org/#boolean-attributes that often correlate with boolean properties. If the attribute is missing, it correlates with the `false` property value, if it's present - the `true` property value. The only valid values are an empty string or the attribute name. jQuery tried to be helpful here and treated boolean attributes in a special way in the `.attr()` API: 1. For the getter, as long as the attribute was present, it was returning the attribute name lowercased, ignoring the value. 2. For the setter, it was removing the attribute when `false` was passed; otherwise, it was ignoring the passed value and set the attribute - interestingly, in jQuery `>=3` not lowercased anymore. The problem is the spec occasionally converts boolean attributes into ones with additional attribute values with special behavior - one such example is the new `"until-found"` value for the `hidden` attribute. Our setter normalization means passing those values is impossible with jQuery. This patch takes a conservative approach, with backwards compatibility in mind, and makes the following changes: 1. It explicitly only applies the logic to the few most popular attribute names. 2. The getter only normalizes the empty string to the lowercased name, returning other attribute values unchanged - it seems unlikely that the empty string value will ever mean anything else than the attribute name repeated. 3. The setter continues to treat `false` as mean attribute removal and `true` as setting the value to the attribute name. All the other inputs are aplied unchanged. With this change, all existing jQuery unit tests were already passing.
diff --git a/src/attributes/attr.js b/src/attributes/attr.js
@@ -97,18 +97,27 @@ if ( isIE ) {
 	};
 }
 
-// HTML boolean attributes have special behavior:
-// we consider the lowercase name to be the only valid value, so
-// getting (if the attribute is present) normalizes to that, as does
-// setting to any non-`false` value (and setting to `false` removes the attribute).
+// HTML boolean attributes have special behavior - the attribute presence
+// corresponds to the `true` value and the lack of it - to `false`. The only
+// officially valid values are an empty string or the attribute name.
 // See https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes
+//
+// Because of that, jQuery used to normalize the value to the name in both
+// the getter & setter. However, the spec occasionally adds more values, making
+// the attribute non-boolean anymore.
+//
+// For backwards compatibility, jQuery keeps special logic for select more popular
+// attributes that are or were boolean attributes (this list is not meant
+// to expand):
+// 1. In the getter, an empty string is converted to the lowercase name.
+// 2. In the setter, `false` means attribute removal and `true` is converted to name.
+// For other getter/setter inputs no special logic is applied.
 jQuery.each( (
-	"checked selected async autofocus autoplay controls defer disabled " +
-	"hidden ismap loop multiple open readonly required scoped"
+	"disabled checked readonly selected required hidden open autofocus multiple"
 ).split( " " ), function( _i, name ) {
 	jQuery.attrHooks[ name ] = {
 		get: function( elem ) {
-			return elem.getAttribute( name ) != null ?
+			return elem.getAttribute( name ) === "" ?
 				name.toLowerCase() :
 				null;
 		},
@@ -118,10 +127,8 @@ jQuery.each( (
 
 				// Remove boolean attributes when set to false
 				jQuery.removeAttr( elem, name );
-			} else {
-				elem.setAttribute( name, name );
+				return name;
 			}
-			return name;
 		}
 	};
 } );
