Url can't change

[Serge Shkurko]

Description

Url can't change automatically

Hello everyone
If location http://127.0.0.1:8081/tabs
i see nested tabs i can switch them but location not changing

otherwise if location http://127.0.0.1:8081/tabs/
and i switch tabs then location is changing normally

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/app-route/app-route.html">
<link rel="import" href="../../bower_components/app-route/app-location.html">
<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">

<dom-module id="test2-app">
  <template>
    <app-location route="{{route}}"></app-location>

    <app-route route="{{route}}" pattern="/:tabName" tail="{{subroute}}" data="{{routeData}}"></app-route>
    <app-route route="{{route}}" pattern="/tabs" tail="{{tabssubroute}}"></app-route>

    <paper-tabs selected="{{routeData.tabName}}" attr-for-selected="name">
      <paper-tab name="tabs">Tabs</paper-tab>
      <paper-tab name="bar">Bar</paper-tab>
      <paper-tab name="baz">Baz!</paper-tab>
    </paper-tabs>

    <iron-pages selected="[[routeData.tabName]]" attr-for-selected="name">
      <div name="tabs">
        <tabs-page route="{{tabssubroute}}"></tabs-page>
      </div>
      <div name="bar">Bar Page Goes Here</div>
      <div name="baz">Baz Page, the Best One of the Three!</div>
    </iron-pages>
  </template>
  <script>
    class ParentTabs extends Polymer.Element {
      static get is() { return 'test2-app'; }

      static get observers() {
        return [
          '_routePageChanged(routeData.tabName)',
        ]
      }

      _routePageChanged(tabName) {
        if (tabName === '') {
          this.set('routeData.tabName', 'tabs')
        }
      }
    }

    window.customElements.define(ParentTabs.is, ParentTabs);
  </script>
</dom-module>

<dom-module id="tabs-page">
  <template>
    <style>
      paper-tabs {
        background-color: var(--paper-blue-a100);
      }
    </style>
    <app-route route="{{route}}" pattern="/:tabName" data="{{routeData}}"></app-route>
    <paper-tabs selected="{{routeData.tabName}}" attr-for-selected="name">
      <paper-tab name="foo">Foo</paper-tab>
      <paper-tab name="bar">Bar</paper-tab>
      <paper-tab name="baz">Baz!</paper-tab>
    </paper-tabs>

    <iron-pages selected="[[routeData.tabName]]" attr-for-selected="name">
      <div name="foo">Foo Page</div>
      <div name="bar">Bar Page Goes Here</div>
      <div name="baz">Baz Page, the Best One of the Three!</div>
    </iron-pages>
  </template>
  <script>
    class ChildTabs extends Polymer.Element {
      static get is() { return 'tabs-page'; }
      static get properties() {
        return {
          route: Object
        }
      }

      static get observers() {
        return [
          '_routePageChanged(routeData.tabName)',
        ]
      }

      _routePageChanged(tabName) {
        if (tabName === '' || tabName === undefined) {
          this.set('routeData.tabName', 'foo')
        }
      }
    }

    window.customElements.define(ChildTabs.is, ChildTabs);
  </script>
</dom-module>

Expected outcome

url:

1. http://localhost/tabs/foo
2. http://localhost/tabs/bar
3. http://localhost/tabs/buz

Actual outcome

url:

1. http://localhost/tabs
2. http://localhost/tabs
3. http://localhost/tabs

Live Demo

https://jsfiddle.net/sergeshkurko/d7b9g5y8/3/

Steps to reproduce

1. Put a code in the page.

• Open the page in a web browser.

2. Click the Tabs tab.

• Click the Foo child tab (if url /tabs it not change, if url /tabs/ changing normally)

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10