Open Sfshaza opened 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.
<template>
is="dom-bind"
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
Hmm, I don't seem to able to reproduce this now?
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 withis="dom-bind"
and access the event that way.This seems unnecessarily complex.
Broken version:
Workaround:
And dependencies from pubspec: