Uncaught TypeError: Cannot read property 'push' of null

[barkerb1]

Array not initialized error, recommend changing _addTag function as follows:

_addTag: function(tag){
      if (this.enableAdd == false){
        return;
      }
      if (typeof(this.tags) == 'undefined' || this.tags == null){
        this.tags = [];
      }
      this.tags.push(tag);
      this.tags = this.tags.slice();  
    },

Added this.tags == null to catch the issue

[cheonhyangzhang]

Hi @barkerb1 Can you give a scenario that this.tags is null?

[barkerb1]

It's been awhile since I found the issue, but I believe it was when data wasn't bound initially on load.

[cheonhyangzhang]

tags is already having default value to be empty array. So this should not happen though. You mean this.tags is not bind with the variables that's assigning to tags property?

[apalaniuk]

@cheonhyangzhang

He probably bound a property with a default value of null to the attribute, which was never updated. This sounds like a bug in his consumer - why not just use the Polymer array manipulation methods on the tags property on data load? Or hide the component until you have data? 😕

Related: it's well worth noting here that your default value initialization of the tags property doesn't seem right. You're setting the value to be an empty array, which will cause a single array to be used across all instances of the component, so you can't use multiple components on the same page with independent tags. The default value for arrays and objects (if set) should be a function that returns a new array instead, which is invoked once per instance - or you can do as you're doing in _addTag and lazily initialize if needed. See https://www.polymer-project.org/1.0/docs/devguide/properties#configure-values

[apalaniuk]

Also, if (typeof(this.tags) == 'undefined' || this.tags == null) is redundant - this.tags == null will catch both null and undefined. But, shouldn't it be this.tags instanceof Array?

[barkerb1]

@apalaniuk you're right, instanceof would be the right approach.

<paper-tags-input placeholder="Please enter a tags for your analytic" empty-error-message="Oops. Tag could not be empty" tag-color="#009D10" font-color="#ffffff"></paper-tags-input>

Now that I look into it, I implemented it without using a tags property. When I persist the tags I accessed them using pure javascript:

document.querySelector('paper-tags-input').tags

I used the following approach because there's no guarantee in the hierarchy where the tags will be in the DOM in relation to the element that's reading the tags, i.e. paper-tags-input maybe a sibling, cousins, grandchild element.

[apalaniuk]

@barkerb1 It must have something to do with how you're modifying the tags property in your client code, but without seeing it, who knows why.

[cheonhyangzhang]

@apalaniuk
So as for the default value problem, so this means, if we have two paper-tags-input element and both of them don't have a variable assign to tags property. They will have the same shared variable for tags, right?

Which means, if they both have initial variable assign to tags property, they will work fine as expected, as we see in the demo, right?

[apalaniuk]

@cheonhyangzhang Exactly.

[cheonhyangzhang]

@apalaniuk

Got it.
#13
I just created a new issue for these two things, 1 problem with default value 2 if need to change the check to be this.tags instanceof Array.

This is for the purpose to make issue management easier.

[cheonhyangzhang]

@apalaniuk @barkerb1
Since this issue is already resolved in #13 I am planning to close this issue.