jsdom: jQuery .val() method on a cloned form element doesn't update its value attribute

I had a weird problem using zombie.js for a functional test of some production cloning script. It seems that using jQuery’s val() on a cloned, unattached element doesn’t work as it would in-browser. Here’s a stripped-down scenario to reproduce it:

<html><body>
<form>
    <input type="text" id="sourceField" name="field" value="should not expose this">
</form>

<script>
(function($) {
    var $template = $('#sourceField').clone();
    $template.val('');
    var $new = $template.clone();
    // in production code, would rename and append here
    console.log($new.prop('name') + ': ' + $new.val());
})(jQuery);
</script>
</body></html>

Running this in a browser console, you see:

field:

In zombie.js, the console shows:

field: should not expose this

If I replace the $template.val(''); with $template.attr('value', '');then the code works consistently in both. It seems that the .val() method doesn’t update the value attribute of the cloned node, which allows its content to persist across further clone operations.

I see it using jQuery 1.8 through 1.11.1. Looking at the jQuery code it seems that it should be a pretty straightforward assignment. I’d welcome someone with better knowledge of jsdom taking a quick look to see if it’s an obvious bug in how it’s handled.

About this issue

Original URL
State: closed
Created 10 years ago
Comments: 15 (14 by maintainers)

Most upvoted comments

I assume you mean this part:

The cloning steps for input elements must propagate the value, dirty value flag, checkedness, and dirty checkedness flag from the node being cloned to the copy.

Will do! Going to see if there are any WPT for this, otherwise will create a new one in to-upstream.

matthewp on Jul 2, 2016