selectedPage is undefined in neon-animated-pages (line 158)

[dulimarta]

My Setup

I have the following route names and paper-menu declared in my app:

<more-route name="pg1"></more-route>
<more-route name="pg2"></more-route>

<paper-menu selected="{{page}}">
  <paper-item route="pg1">First menu</paper-item>
  <paper-item route="pg2">Second menu</paper-item>
</paper-menu>

Prior to using more-route-selector in the following snippet (with most contents stripped out), my old (and working) code begins and ends with neon-animated-pages.

<more-route-selector>
  <neon-animated-pages selected="[[page]]" entry-animation="fade-in-animation"
                               exit-animation="fade-out-animation">
    <section id="page1" route="pg1">
      <neon-animatable>
        First page here
      </neon-animatable>
    </section>
    <section id="page2" route="pg2">
      <neon-animatable>
        Second page here
      </neon-animatable>
    </section>
  </neon-animated-pages>
</more-route-selector>

This is my bower dependencies:

"dependencies": {
    "polymer": "Polymer/polymer#^1.0.0",
    "google-chart": "GoogleWebComponents/google-chart#~1.0.2",
    "neon-animation": "PolymerElements/neon-animation#^1.0.0",
    "iron-elements": "PolymerElements/iron-elements#~1.0.0",
    "paper-elements": "PolymerElements/paper-elements#~1.0.1",
    "vaadin-components": "0.3.0-beta4",
    "iron-flex-layout": "PolymerElements/iron-flex-layout#~1.0.1",
    "iron-signals": "PolymerElements/iron-signals#^1.0.0",
    "more-routing": "Polymore/more-routing#~1.0.0"
  }

The issue

When switching back and forth between the two pages, I saw the following error message in the console:

Uncaught TypeError: Cannot read property 'classList' of undefined             neon-animated-pages.html:158

When iron-pages was used in place of neon-animated-pages, everything works with no errors.

[triglian]

TL;DR: more-routing sets the selected value of neon-animated-pages to -1 when the new route is after the current one (in order of registration). Eventually the new route is going to be set correctly. Problem is that by then, neon-animated-pages has already tried to switch to the new, undefined, page.

It works like this:
The problem starts at function _matchingRoutes of the Driver.prototype of more-routing. When the path changes, this function is called and goes through all the routes to see if they match.
In line 103 it calls route.processPathParts(parts);

This function sets the active property of each route to true or false based on the result of this.matchesPathParts(parts) in line 145. Setting this property will trigger the setter function of the aforementioned active property which will eventually lead to the execution of the _evaluate() function of more-route-selection defined in line 136. This function will fire a "more-route-change" event with the information for the new and old routes, paths, indexes and params. The problem is that this event will have an undefined newRoute that will find itself all the way to neon-animated-pages whenever we change the active property of a route from true to false, without having set the new route from false to active first.

I think you should mention this to the issues of more-routing.

[bradreeve]

I was running in to this issue too, thanks for the breakdown @triglian

I've created a pretty naive patch to workaround the issue; basically I defer the deactivation of the 'old route' to _matchingRoutes by temporarily setting a deactivate flag on the route to be turned off, inside processPathParts. processPathParts still activates the new route as before.

While we are looping through each route inside _matchingRoutes, if we pick up a deactivate property on any route, that route is stored in a temporarily variable (and the deactivate property removed again). Once we've exited the loop, all new routes have been activated, and we can safely deactivate the old route if we stored one away.

A little bit messy with adding/deleting the property but without a heavy understanding on the internal structure of more-routing I wanted to avoid any significant re-working.

This allows neon-animated-pages to work correctly.

See here for the fix: capbbeard/more-routing@0fa6524ceb3921374e10ea95e9b508ab1eb63055