Two-way binding to app-route routeData with fallbackSelection breaks back buton

135 views Asked by At

My goal is to provide a default view in my route which is also accessible via URL. To accomplish that goal, I bound the selected properties of paper-tabs (an iron-selector implementation) and iron-pages to routeData.view

<!-- parent route: app/route -->

<app-route id="route"
    route="{{route}}"
    pattern="/:view"
    data="{{routeData}}"
></app-route>

<paper-tabs id="tabs"
    selected="{{routeData.view}}"
    fallback-selection="foo"
    attr-for-selected="name">
  <paper-tab link name="incomplete" hidden></paper-tab>
  <paper-tab link name="foo">FOO</paper-tab>
  <paper-tab link name="bar">BAR</paper-tab>
</paper-tabs>

<iron-pages id="pages"
  selected="[[routeData.view]]"
  attr-for-selected="id">

  <div id="incomplete">INCOMPLETE view</div>

  <div id="foo">FOO view</div>

  <div id="bar">BAR view</div>

</iron-pages>

When a user navigates to this route (let's call it /app/route/, the fallbackSelection on paper-tabs binds up to routeData, and adds foo/ to the window.location (/app/route/foo).

This adds history to window.history: if the user got to this view by clicking a link, pressing the back button will not return them to the previous page. In this case, they have to press the back button three times in order to get back.

How can I provide an addressed default view for my subroute without breaking the back button?

0

There are 0 answers