I am lost working on an inherited project: a web frontend for a Java application providing its data on a server. It contains a lot of unfixed bugs, mostly, probably, from the migration to Polymer 1.0 which was the last thing the person working on the frontend did before leaving. So far, I have updated all npm and bower dependencies to their latest versions and been looking through most of what is happening in the custom HTML and JavaScript parts but me only knowing some basic HTML and Java does not help pushing things forward.
The HTML structure in the area is roughly this:
<paper-scaffold id="scaffold" drawer-width="{{drawerWidth}}" responsive-width="{{responsiveWidth}}" mlist="{{mList}}>
<neon-animated-pages id="pages-blocks" class="flex" selected="{{selectedPage}}" entry-animation="{{entryAnimation}}" exit-animation="{{exitAnimation}}">
<template is="dom-repeat" items="{{list}}" as="block" index-as="blockIndex">
<neon-animatable> (content) </neon-animatable>
</template>
<neon-animated-pages>
</paper-scaffold>
(<paper-scaffold> is a custom scaffold derived from <core-scaffold>.)
The whole contraption works as intended in most instances - you click on the items in the list to select them and have the content of the corresponding server objects be displayed elsewhere in the frontend -, except for the first entry in the list. It goes like this:
- first item is selected and handled as normal
- once you try to select another item AFTER the first one the selection stays and an error is thrown in neon-animated-pages.html:
Uncaught TypeError: Cannot read property 'classList' of undefined. - a click on another item unfreezes the selection (although the error is thrown once more)
- from then on everythings is back normal, until the first block is selected again
The line throwing the error is in neon-animated-pages' _selectedChanged function observing the variable selected which changes with every click selecting a new item. It reads:
selectedPage.classList.add('neon-animating');
So I went to monitor the variable selectedPage and it seems that rather a lot is happening at a click on the item list.
When switching from any item except the first to another (including the first), _selectedChanged is called three times:
selectedPageis undefined but the function exits because it does not find a previously selected page which causes it to stopselectedPageis an [object HTMLElement] as expected, the function finishes without errorselectedPageis undefined but the function exits because it does not find a previously selected page which causes it to stop
When switching from the first to another item, _selectedChanged is called three times:
selectedPageis an [object HTMLElement] as expected all three times and the function finishes without error
When switching from the item selected after the first one to any other, _selectedChanged is called once:
selectedPageis undefined but a previous page is known, the error is thrown
When switching from that item to another, it looks the same as normal (three calls, two undefined) and works as intended, but the error is thrown anyway.
The only other instance of the selectedPage being undefined I could find is this issue report on "more-routing", but there is no routing happening in this frontend.
I am sorry if this is all very convoluted but I've only just begun looking into web development and polymer and cannot even find a place to start debugging because so much seems to be happening outside of my reach. None of the variables used by neon-animated-pages are actively assigned by "my" code. I'll gladly provide any additional information that might help solving this problem.
