polymer-dart
polymer-dart copied to clipboard
Published
20 hours ago •
dart-archive
dart-archive
Problem getting events from paper-input component
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
