location.hash not is sync with route path

[christophe-g]

Description

The route and hash are not in sync.

Expected outcome

In the example below, the expected outcome is that the hash part of the url is in sync with the selected tab.

Actual outcome

loading the page without already setting the # part (e.g. just localhost instead of localhost/#home) causes the url to be out of sync (no change in the url is observed when selecting new tab).

Use case

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../bower_components/neon-animation/neon-animations.html">
<link rel="import" href="../bower_components/carbon-route/carbon-location.html">
<link rel="import" href="../bower_components/carbon-route/carbon-route.html">
<link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../bower_components/paper-tabs/paper-tab.html">
<dom-module id="test-carbon">
  <template id="app">
    <!-- include the style module by name -->
    <style>
    :host {
      display: block;
    }

    #page {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    </style>
    <carbon-location route={{route}} use-hash-as-path></carbon-location>
    <carbon-route route="{{route}}" pattern=":tab" data="{{data}}"></carbon-route>
    <paper-scroll-header-panel id="page" condenses>
      <paper-toolbar class="tall">
        <div class="title">Title</div>
        <div class="bottom">
          <paper-tabs selected="{{data.tab}}" attr-for-selected="name">
            <template is="dom-repeat" items="[[sections]]" as="section">
              <paper-tab name="[[section.id]]"><span>[[section.title]]</span></paper-tab>
            </template>
          </paper-tabs>
        </div>
      </paper-toolbar>
      <div class="content">
        <neon-animated-pages attr-for-selected="data-route" relative-position selected="[[data.tab]]" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
          <div data-route="home">
            <h3>Home</h3>
            <p>Home content</p>
          </div>
          <div data-route="dashboard">
            <h3>Dashboard</h3>
            <p>Dashboard content</p>
          </div>
        </neon-animated-pages>
      </div>
    </paper-scroll-header-panel>
  </template>
  <script>
  (function() {
    'use strict';

    Polymer({
      is: 'test-carbon',

      properties: {

        route: {
          type: Object,
          notify: true
        },

        data: {
          type: Object,
          value: {
            tab: 'dashboard'
          }
        },

        sections: {
          type: Array,
          value: function() {
            return [{
              id: 'home',
              title: 'home'
            }, {
              id: 'dashboard',
              title: 'dashboard'
            }]
          }
        }
      }
    });
  })();
  </script>
</dom-module>

Browsers Affected

• [x ] Chrome
  (other browsers not tested)

[christophe-g]

o.k.
seems to be linked to the same issue as #75 and #37 (with a PR on #77).

Some additional docs on how to approach this use-case would be welcome ; )
C.

[rictic]

The simplest solution for now is to write a bit of code that inspects the hash on page load and redirects to #/ or similar if it's blank. We're thinking about how best to address this more generally. As you noticed, #37 is the issue to follow.