Toggle button doesn't set active after first click.

[luisvt]

I'm trying to set paper-button active using next code

in the html file:

<template>
...
  <paper-button id="button1" toggle active="{{buttonsActive}}">button 1</paper-button>
  <paper-button id="button2" toggle active="{{buttonsActive}}">button 2</paper-button>
</template>

and in the dart file:

@observable bool buttonsActive = false;

if I press button1 at the begginning it change the button2 to active/inactive. However if I later press button2, after pressing button1, button1 doesn't change active state. The same happens in the other way if I press button2 first.

I found a workaround.

Add next buttonsActiveListener:

buttonsActiveChanged(bool oldValue, bool newValue) {
    ($['button1'] as PaperButton).jsElement['lastEvent'] = null;
    ($['button2'] as PaperButton).jsElement['lastEvent'] = null;
  }

previous code makes lastEvetn null everytime buttonsActive variable changes.

This is caused because this:

  activeChanged: function() {
    this.super();

    if (this.toggle && (!this.lastEvent || this.matches(':host-context([noink])'))) {
      this.toggleBackground();
    }
  },

which appears on line 58 of paper-button-base.html. The important line is the if statement which checks if the lastEvent is falsey (null or undefined).

Again this is just a workaround.

Is this a bug on paper-button or is there a way to do this correctly?