Closed SergeShkurko closed 6 years ago
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>
url:
https://jsfiddle.net/sergeshkurko/d7b9g5y8/3/
Tabs
Foo
/tabs
/tabs/
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
![](https://i.stack.imgur.com/47rfc.png)
otherwise if location http://127.0.0.1:8081/tabs/ and i switch tabs then location is changing normally
![](https://i.stack.imgur.com/0wjIQ.png)
Expected outcome
url:
Actual outcome
url:
Live Demo
https://jsfiddle.net/sergeshkurko/d7b9g5y8/3/
Steps to reproduce
Tabs
tab.Foo
child tab (if url/tabs
it not change, if url/tabs/
changing normally)Browsers Affected