Search code examples
dartdart-polymerobservable

Cannot observe properties of nested elements in Safari 8.0 (iPad, iOS 8.1.3) in Polymer.dart

I'm trying to observe a property change from nested Dart PolymerElements. It works in Firefox, Chrome, but not in Safari 8.0 on iPad (iOS 8.1.3):

index.html file:

<!DOCTYPE html>

<html>
<head>
  <title>Test</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="import" href="parent_element.html">
</head>
<body unresolved fullbleed>

  <parent-element></parent-element>

  <script type="application/dart">export 'package:polymer/init.dart';</script>
  <script src="packages/browser/dart.js"></script>
</body>
</html>

parent_element.html file:

<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/core_elements/core_header_panel.html">
<link rel="import" href="packages/core_elements/core_toolbar.html">
<link rel="import" href="packages/paper_elements/paper_icon_button.html">
<link rel="import" href="packages/paper_elements/paper_button.html">
<link rel="import" href="child-element.html">

<polymer-element name="parent-element">
  <template>
    <style>
      :host, core-header-panel {
        height: 100%;
      }
    </style>
    <core-header-panel mode="waterfall" flex>
      <core-toolbar class="small">
        <div>Observed value in parent is {{logged}}</div>
        <span flex></span>
        <div id="message"></div>

        <child-element id="login-box" logged="{{logged}}"></child-element>
        <paper-button on-click="{{doLogin}}" raised hidden?="{{logged}}">Login</paper-button>
        <paper-button on-click="{{doLogout}}" raised hidden?="{{!logged}}">Logout</paper-button>

      </core-toolbar>
    </core-header-panel>
  </template>
  <script type="application/dart" src="parent-element.dart"></script>
</polymer-element>

parent-element.dart file:

@CustomTag('parent-element')
class ParentElement extends PolymerElement {

  ChildElement childElement;

  @observable bool logged = false;

  ParentElement.created() : super.created() {
    //while(children.length > 0) {
    //  shadowRoot.append(children[0]);
    //}
    childElement = (shadowRoot.querySelector('#login-box') as ChildElement);
  }

  void loggedChanged() {
    print('loggedChanged: $logged');
  }

  void doLogin(Event e, var details, Node node) {
    childElement.doLogin();
  }

  void doLogout(Event e, var details, Node node) {
    childElement.doLogout();
  }
}

child-element.html file:

<link rel="import" href="packages/polymer/polymer.html">
...
<polymer-element name="child-element">
  <template>
    <style>
    </style>

    <paper-action-dialog id="login-dialog" heading="Login to.." transition="core-transition-center" backdrop="" layered="true">
      <p>Observed value in child is ({{ logged }})</p>
      <paper-button affirmative>Cancel</paper-button>
      <paper-button id="login-button" affirmative autofocus >Join</paper-button>
    </paper-action-dialog>

  </template>
  <script type="application/dart" src="child-element.dart"></script>
</polymer-element>

child-element.dart file:

@CustomTag('child-element')
class ChildElement extends PolymerElement {
  bool _loginListen = false;
  @published bool logged;

  ChildElement.created() : super.created() {
    // I can't set onClick listen here because login-button doesn't exists yet. Why?
    //var loginBtn = ($['login-button'] as PaperButton); ==> null
    //var loginBtn1 = (querySelector('#login-button') as PaperButton); ==> null
  }

  void doLogin() {
    if (!_loginListen) {
      PaperButton button = (shadowRoot.querySelector('#login-button') as PaperButton);
      button.onClick.listen((Event e) {
        _login(e);
      });
      _loginListen = true;
    }

    PaperDialogBase dialog = (shadowRoot.querySelector('#login-dialog') as PaperDialogBase);
    dialog.toggle();
  }

  void _login(Event event) {
    print('Login...');
    logged = true;
  }

  void doLogout() {
    print('Logout...');
    logged = false;
  }

}

pubspec.yaml file:

name: test
version: 0.0.1
description: Test of observers
dependencies:
  paper_elements: 0.6.1
  polymer: ">=0.15.0 <0.16.0"
  browser: 0.10.0
transformers:
- polymer:
    entry_points: web/index.html

When I click the button "JOIN" (in child-element), it triggers "loggedChanged" (in parent-element) and change text "Observed value in parent" (but not in Safari on iPad).

Please advise how to fix it. Thanks a lot.

p.s. I tryed to use "dataobject" instead of "bool logged":

class DataObject extends Observable {
  @observable bool logged = false;
}

but I got the same effect.

Solution

  • I've created a bug report https://code.google.com/p/dart/issues/detail?id=22275 along with test sample.

    UPD: This effect is due presence of affirmative or dismissive attributes on paper-button in paper-action-dialog. Without them the parent-element observes change of the property in the child-element. I've replaced the paper-action-dialog to paper-dialog and it works on Safari.