Polymer paper-dialog in dom-repeat opens when other array item is deleted

Here is a snippet:

<template is="dom-repeat" items="{{zones}}" as="zone">
  <paper-button on-tap="_openSettings">Open Settings
  </paper-button>
  <paper-dialog id="[[_getZoneSettingsId(zone.id)]]" class="zone-settings">
    <input type="button" class="delete-zone" value="Delete zone" on-tap="_deleteZone"/>
  </paper-dialog>
</template>

<script>   
  Polymer({
    ...,
    _openSettings: function(e) {
      var zone = e.model.zone;
      this.$$("#" + this._getZoneSettingsId(zone.id)).open();
    },

    _getZoneSettingsId: function(zoneId) {
      return "zone-settings-" + zoneId.toString();
    },

    _deleteZone: function(e) {
      var zone = e.model.zone;
      var zones = this.zones.slice(0);
      for (var i = zones.length - 1; i >= 0; i--) {
        if(zone.id === zones[i].id) {
          zones.splice(i, 1);
        }
      }
      this.set("zones", zones);
    }
  })
</script>

One of the things that can be done in this dialog is deleting the zone from the zones list. This works fine as long as I delete the last zone in the list. However, if I have two zones and delete the first one, the dialog for the second one automatically opens as though it has replaced the first one.

I assume this has to do with how dom-repeat works, but I am not sure how to fix it. Any clues?

To notify polymer about changes in array, you have to use array mutation functions. So in your case you can use this.splice();

all these functions can be found here: https://www.polymer-project.org/1.0/docs/devguide/model-data#array-mutation