WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 4 months ago

Last modified 4 months ago

#51621 closed defect (bug) (fixed)

jQuery Migrate throws error when an object is specified for the name parameter and number for the value parameter

Reported by: mweichert Owned by: helen
Milestone: 5.6 Priority: high
Severity: major Version: 5.6
Component: External Libraries Keywords: has-patch has-unit-tests
Focuses: javascript Cc:

Description (last modified by azaozz)

jQuery Migrate will treat the name as a string when a number is provided as the value. However, it shouldn't make that assumption.

jQuery UI Slider will make a call to jQuery.fn.css like so:

jQuery.css({left: "100%"}, 300)

It does this when the animate setting is specified. See https://jsfiddle.net/mweichert/784kjmoh/17/

jQuery UI Slider is used in this context by wp-color-picker / iris.

Note, I've created an issue and pull request for jquery-migrate here:
https://github.com/jquery/jquery-migrate/issues/404

Change History (12)

This ticket was mentioned in Slack in #core by mweichert. View the logs.


4 months ago

This ticket was mentioned in PR #654 on WordPress/wordpress-develop by mweichert.


4 months ago

jQuery Migrate has a bug which treats the name argument as a string when the value parameter is a number. I've created a PR (that includes tests) for jquery-migrate to fix that. Till that gets merged upstream, WP should be testing against a version of jquery-migrate that doesn't have that problem. I'm included the built version of jquery-migrate from the fork of jquery-migrate I used when submitting my PR.

Trac ticket: https://core.trac.wordpress.org/ticket/51621#ticket

#3 @Clorith
4 months ago

Thank you very much for finding this, and for reporting it upstream to the jQuery team!

Just so I'm understanding this right, this is jQuery Migrate incorrectly being triggered by Query code in the Iris library of WordPress, which should be compatible without any deprecations in jQuery 3.x?

#4 @mweichert
4 months ago

No, not exactly.

jQuery has deprecated number values being passed to jQuery.fn.css:
https://github.com/jquery/jquery-migrate/blob/master/warnings.md#jqmigrate-number-typed-values-are-deprecated-for-jqueryfncss-property-name-value-

E.g.

This call should trigger a "Number-typed values are deprecated for jQuery.fn.css" warning:

jQuery('<div/>').css('width', 30); // implicit px

The above behaviour is working correctly.

However, you can also make these calls to jQuery.fn.css:

jQuery('<div/>').css({width: "30%"});
jQuery('<div/>').css({width: "30%"}, 300); // <- note this use 

jQuery UI Slider will make use of the noted call above when the animate setting is set. See this fiddle I created as an example:
https://jsfiddle.net/mweichert/784kjmoh/17/

Because Iris uses the animate setting for the slider, it will also trigger this jQuery.fn.css call.

As a reminder, jQuery.fn.css accepts two parameters called "name" and "value".

jQuery Migrate mistakenly assumes that "name" is a string when "value" is a number, which will throw an exception when the .replace() method is called on name via the camelCase function which jQuery Migrate provides:

jQuery.fn.css = function( name, value ) {
	var camelName,
		origThis = this;
	if ( name && typeof name === "object" && !Array.isArray( name ) ) {
		jQuery.each( name, function( n, v ) {
			jQuery.fn.css.call( origThis, n, v );
		} );
	}
	if ( typeof value === "number" ) {
		camelName = camelCase( name ); // throws error because name is not a string
		if ( !isAutoPx( camelName ) && !jQuery.cssNumber[ camelName ] ) {
			migrateWarn( "Number-typed values are deprecated for jQuery.fn.css( \"" +
				name + "\", value )" );
		}
	}

	return oldFnCss.apply( this, arguments );
};

Hopefully that helps. Let me know if there's any more questions. I should maybe also create an issue for jQuery UI Slider, as its also a fault on their end, but for migration reasons, jquery-migrate needs to adjust here as well as jQuery 1.12.1 and earlier will be commonly used for a while.

#5 follow-up: @mweichert
4 months ago

It was pointed out to me that the code snippet in the issue description had a syntax error. Not sure if anyone can update it but it should be this:

jQuery UI Slider will make a call to jQuery.fn.css like so:

jQuery.css({left: "100%"}, 300);

It does this when the animate setting is specified. See https://jsfiddle.net/mweichert/784kjmoh/17/

#6 @azaozz
4 months ago

  • Component changed from Script Loader to External Libraries
  • Description modified (diff)
  • Focuses ui removed
  • Milestone changed from Awaiting Review to 5.6
  • Priority changed from normal to high

@mweichert as @Clorith mentioned thank you for the bug report and the patch.

Looking upstream seems this will be resolved in jQuery Migrate very soon, probably before beta-2 next Tuesday. If not, I'm a +1 to commit to WP while it is being resolved in Migrate.

Last edited 4 months ago by azaozz (previous) (diff)

#7 in reply to: ↑ 5 @azaozz
4 months ago

Replying to mweichert:

It was pointed out to me that the code snippet in the issue description had a syntax error.

Fixed, thanks.

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


4 months ago

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


4 months ago

#10 @helen
4 months ago

  • Owner set to helen
  • Resolution set to fixed
  • Status changed from new to closed

In 49338:

External Libraries: Update jQuery Migrate to 3.3.2-pre.

This is a prerelease version to avoid some errors in 5.6 beta 2. We need to be sure that we ship with a released version by 5.6 RC.

Props mweichert.
Fixes #51621. See #50564.

#12 @SergeyBiryukov
4 months ago

In 49615:

Script Loader: Correct version for jQuery Migrate.

Follow-up to [49338].

See #51621, #50564.

Note: See TracTickets for help on using tickets.