dart-archive / polymer-dart

Polymer support for Dart
https://pub.dartlang.org/packages/polymer
BSD 3-Clause "New" or "Revised" License
180 stars 33 forks source link

Problem getting events from paper-input component #647

Open Sfshaza opened 8 years ago

Sfshaza commented 8 years ago

Two or three weeks ago, I was able to register for (and receive) a key-up event on a paper-input element. It has stopped working. I think it's a bug.

Jake suggested a workaround that does work: put the paper elements in a <template> tag marked with is="dom-bind" and access the event that way.

This seems unnecessarily complex.

Broken version:

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Using Paper Elements</title>

    <link rel="import" href="packages/polymer_elements/roboto.html">

    <script async src="packages/web_components/webcomponents-lite.js"></script>
    <script async src="index.dart" type="application/dart"></script>
    <script async src="packages/browser/dart.js"></script>

    <link rel="stylesheet" href="styles.css">
</head>

<body unresolved>

<h2>Using Paper Elements</h2>

<paper-checkbox>Notifications</paper-checkbox>
<paper-dropdown-menu label="Favorite pizza">
    <paper-menu class="dropdown-content">
        <paper-item>Cheese</paper-item>
        <paper-item>Pesto</paper-item>
        <paper-item>Mushroom</paper-item>
        <paper-item>Everything</paper-item>
    </paper-menu>
</paper-dropdown-menu>
<paper-button raised>Click me</paper-button>

<paper-input label="Enter text: "></paper-input>

</body>
</html>
main() async {
  await initPolymer();

  // Note: The "tap" event processes faster than the "click" event.
  querySelector('paper-button').on['tap'].listen((_) {
    print('Button tapped!');
  });

  querySelector('paper-checkbox').on['change'].listen((e) {
    bool checked = e.target.checked;
    print('Checkbox changed: $checked');
  });

  querySelector('paper-menu').on['tap'].listen((e) {
    var selected = e.target.text;
    print('Selected pizza: $selected');
  });   

  querySelector('paper-input').on['keyup'].listen((e) {
    String input = e.target.value;
    print('Input entered: $input');
  });
}

Workaround:

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Using Paper Elements</title>

    <link rel="import" href="packages/polymer_elements/roboto.html">

    <script defer src="packages/web_components/webcomponents-lite.js"></script>
    <script defer src="index.dart" type="application/dart"></script>
    <script defer src="packages/browser/dart.js"></script>

    <link rel="stylesheet" href="styles.css">
</head>

<body unresolved>

<h2>Using Paper Elements</h2>

<template is="dom-bind">
  <paper-checkbox>Notifications</paper-checkbox>
  <paper-dropdown-menu label="Favorite pizza">
      <paper-menu class="dropdown-content">
          <paper-item>Cheese</paper-item>
          <paper-item>Pesto</paper-item>
          <paper-item>Mushroom</paper-item>
          <paper-item>Everything</paper-item>
      </paper-menu>
  </paper-dropdown-menu>
  <paper-button raised>Click me</paper-button>

  <paper-input on-keyup="onKeyUp" label="Enter text: "></paper-input>
</template>

</body>
</html>
main() async {
  await initPolymer();

  // Note: The "tap" event processes faster than the "click" event.
  querySelector('paper-button').on['tap'].listen((_) {
    print('Button tapped!');
  });

  querySelector('paper-checkbox').on['change'].listen((e) {
    bool checked = e.target.checked;
    print('Checkbox changed: $checked');
  });

  querySelector('paper-menu').on['tap'].listen((e) {
    var selected = e.target.text;
    print('Selected pizza: $selected');
  });     

  var domBind = querySelector('template[is="dom-bind"]');
  domBind['onKeyUp'] = (e, _) {
    String input = e.target.value;
    print('Input entered: $input');
  };
} 

And dependencies from pubspec:

dependencies:
  browser: ^0.10.0
  polymer_elements: ^1.0.0-rc.3
  polymer: ^1.0.0-rc.6
  web_components: ^0.12.0+3
  reflectable: ^0.3.3
jakemac53 commented 8 years ago

Hmm, I don't seem to able to reproduce this now?