Just filed an issue https://github.com/ErikGrimes/polymer_elements/issues/117. Reproducing here.
I'm using a polymer-ui-tabs with a polymer-ui-pages and it doesn't reliably change the page when a tab clicked.
To reproduce use the code below. Then
observe that the
Twotab is selected and theTwopage is shownclick on the
Threetab is selected and theThreepage is shownclick on the
Twotab. The content still shows theThreepage
Repeat with the selectedTab = 1; removed from the dart code. Now the tabs work correctly.
polymer_tabs_issue.html
<!DOCTYPE html>
<polymer-element name="polymer-tabs-issue" attributes="selectedTab">
<link rel="import" href="packages/polymer_ui_elements/polymer_ui_tabs/polymer_ui_tabs.html">
<link rel="import" href="packages/polymer_ui_elements/polymer_ui_pages/polymer_ui_pages.html">
<link rel="import" href="packages/polymer_elements/polymer_layout/polymer_layout.html">
<template>
<style type="text/css">
polymer-ui-tabs {
width: 100%;
height: 70px; /* not sure why need to set height */
}
polymer-ui-pages {
width: 100%;
border: 1px solid gray;
margin: 0px 5px 5px 5px;
}
polymer-ui-tabs > * {
width: 30%;
}
</style>
<div style="width:100%;height:100%;">
<polymer-layout vertical></polymer-layout>
<div>
<polymer-layout></polymer-layout>
<polymer-ui-tabs selected="{{selectedTab}}">
<span>One</span>
<span>Two</span>
<span>Three</span>
</polymer-ui-tabs>
<div flex></div>
</div>
<polymer-ui-pages selected="{{selectedTab}}" flex>
<span>One</span>
<span>Two</span>
<span>Three</span>
</polymer-ui-pages>
</div>
</template>
<script type="application/dart" src="polymer_tabs_issue.dart">
</script>
</polymer-element>
index.html
<!doctype html>
<html>
<head>
<title>polymer tabs issue</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="import" href="polymer_tabs_issue.html">
<link rel="import" href="packages/polymer_elements/polymer_layout/polymer_layout.html">
</head>
<body>
<polymer-layout></polymer-layout>
<polymer-tabs-issue flex></polymer-tabs-issue>
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
polymer-tabs-issue.dart
library polymer_tabs_issue;
import 'package:polymer/polymer.dart';
@CustomTag('polymer-tabs-issue')
class PolymerTabsIssueElement extends PolymerElement {
@published
dynamic selectedTab;
PolymerTabsIssueElement.created(): super.created();
@override
void ready() {
selectedTab = 1;
}
}
