Polymer: dom-repeat two-way data binding issue

Created on 31 May 2017  路  6Comments  路  Source: Polymer/polymer

Live Demo

http://jsbin.com/favulo/5/edit?html,output

Steps to Reproduce

  1. In a demo page, Tap add new button
  2. Type something in newly added input
  3. Tap add new button again
    add-new0
    add-new1

Expected Results

Newly added input should have blank value

Actual Results

Newly added input has pre-filled value
add-new2

Browsers Affected

  • [x] Chrome
  • [x] Firefox
  • [x] Edge
  • [x] Safari 9
  • [x] Safari 8
  • [x] IE 11

Versions

  • Polymer: v1.9.1

Most helpful comment

There is a funnier test to do! 馃槂

Click twice one the _"Add new"_ button, write in the second input.
Click one more time on the _"Add new"_ button and type into the third added input.

Tada! 馃帀

All 6 comments

There is a funnier test to do! 馃槂

Click twice one the _"Add new"_ button, write in the second input.
Click one more time on the _"Add new"_ button and type into the third added input.

Tada! 馃帀

The problem is your items declaration in the properties block.

You need to replace:

properties: {
  items: {
    type: Array,
    value:  ['John', 'Bob'];
   }
 },
properties: {
  items: {
    type: Array,
    value: function() { return ['John', 'Bob'];}
  }
},

See the updated fiddle: http://jsbin.com/qaqidadute/edit?html,output

Check also documentation

When initializing a property to an object or array value, use a function to ensure that each element gets its own copy of the value, rather than having an object or array shared across all instances of the element.

@timeu I agree, the declaration should use a function but I got the same result with your fiddle.

@masonlouchart
You are right. That was not the underlying issue.
If you replace the array of primitive strings with an array of objects, it seems to work tough: http://jsbin.com/hajowufihi/edit?html,output

I think that is somehow related to the fact that dom-repeat does not work well with an array of primitives in Polymer 1.x (#1913). This should be fixed in Polymer 2.x

Nice catch @timeu 馃憤

Now @pradiprv has all cards in their hands!

As @timeu noted in #1913, Polymer 1.x has poor support for mutating primitive array values bound to a dom-repeat.

This has been fixed in Polymer 2.0 by completely changing how array changes are tracked in the system: http://jsbin.com/qacowe/edit?html,output

It is unlikely at this point we'll address the fundamental issues in 1.x leading to these types of issues, so I'm going to close this with recommendations of a.) upgrading to Polymer 2.0, or b.) using the workaround of wrapping primitives in objects.

Was this page helpful?
0 / 5 - 0 ratings