app-location fires 'route-changed' event twice on a single route change

[mkropf]

Description

Example usage:

<dom-module id="client-component">
  <template>
    <app-location id="loc" route="{{_route}}" use-hash-as-path></app-location>
    <p><a href="#test">test</a></p>
  </template>
  <script>
    window.addEventListener('WebComponentsReady',function(){Polymer({
      is: 'client-component',
      ready: function(){
        this.$.loc.addEventListener('route-changed',function(e){
          console.log(e.detail)
        });
      }
    })});
  </script>
</dom-module>

Expected outcome

Clicking the link or changing the browser address should log a single event.

Actual outcome

The event is fired twice.

Analysis

Finding the cause in debugger showed that the property-changed effect is registered twice and therefore triggered twice when the route property changed. The cause for the duplicated effect registration is the fact that app-location declares the 'route' property and has the AppRouteConverterBehavior, which in turn also declares the 'route' property. (You may see it as a app-location bug or as polymer core bug)

[Niklas2908]

In my case the app-location fires once on the first route but twice for every following route back to the page.

[diwalkerdev]

Related/duplicated: https://github.com/PolymerElements/app-route/issues/178

[lauritowal]

For me, this happens only when the path has parameters like /path?parameter=test

[mkropf]

outdated, nobody caring anymore

[danleyb2]

@mkropf this issue still exist