Polymer 1.0 dom-repeat is not notified properly when array changes

Question

I have a <paper-dialog> modal which acts like a form to invite new candidates to take a challenge. In the <invite-candidates> component there is a dom-repeat which renders a complex input(<invite-candidate-input>) for each object in the candidates list.

Every time i open(toggle) that modal, i clear the list and add a new object to be rendered.The first time i open the page and open the modal, i see an input, as expected. But if i close the modal and then open it again, it is cleared, a new object is added to the list, but the dom-repeat isn't notified. When i click the button to add another input, it's added to the list and rendered. But my list has 2 objects now, and only 1 <invite-candidate-input>.

<dom-module id="candidate-page">
<template>
    <button id="createActionButton" on-click="_toggleDialog"></button>
    <invite-candidates id="inviteCandidates"></invite-candidates>
</template>
<script>
    Polymer({
        is: 'candidate-page',
        properties: {
            Address: String,
            challenges: {
                type: Array,
                notify: true
            }
        },
        _toggleDialog: function () {
            this.$.inviteCandidates.toggle();
        }
    });
</script>

<dom-module id="invite-candidates">
<template>
    <paper-dialog id="dialog" modal style="background: white;">
        <form is="iron-form" id="form">
            <template is="dom-repeat" items="{{candidates}}">
                <invite-candidate-input candidate="{{item}}"></invite-candidate-input>
            </template>
            <div id="addCandidate" on-click="_addCandidate">
                <iron-icon icon="add"></iron-icon>
                <span>Add another candidate</span>
            </div>
            <div class="buttonGroup">
                <paper-button class="primary" raised on-click="inviteCandidates" dialog-confirm>Invite
                </paper-button>
            </div>
        </form>
    </paper-dialog>
</template>
<script>
    Polymer({
        is: 'invite-candidates',
        properties: {
            candidates: {
                type: Array,
                notify: true,
                value: []
            }
        },
        listeners: {
            'candidate-removed': '_removeCandidate'
        },
        toggle: function () {
            this._clearDialog();
            this._addCandidate();
            this.$.dialog.toggle();
        },
        _addCandidate: function () {
            this.push('candidates', {});
        },
        _removeCandidate: function(event){
            var index = this.candidates.indexOf(event.detail);
            this.splice('candidates', index, 1);
        },
        _clearDialog: function () {
            var el;
            while ((el = document.querySelector('invite-candidate-input')) !== null) {
                el.remove();
            }
            this.candidates = [];
        }
    });
</script>

<dom-module id="invite-candidate-input">
<template>
    <div id="inputContainer">
        <paper-input id="address" label="Address" value="{{candidate.Address}}"></paper-input>
        <iron-icon icon="remove" on-click="_removeItem"></iron-icon>
    </div>
    <br>
</template>
<script>
    Polymer({
        is: 'invite-candidate-input',
        properties: {
            challenges: {
                type: Array
            },
            candidate: {
                type: Object,
                reflectToAttribute: true,
                notify: true
            }
        }
        _removeItem: function () {
            this.fire('candidate-removed', this.candidate);
            this.remove();
        }
    });
</script>

Answer 1

It is because in _clearDialog you do this.candiates = [];. If you do this.splice('candidates', this.candidates.length) it should work.