Forward change event vaadin combo box (#1208)

* Forward change event vaadin combo box

* Stop propagation
This commit is contained in:
Paulus Schoutsen 2018-05-25 16:46:54 -04:00 committed by GitHub
parent 4e9a7a4a23
commit d3c10d9b49
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 4 deletions

View File

@ -11,11 +11,12 @@ import './state-badge.js';
import computeStateName from '../../common/entity/compute_state_name.js';
import LocalizeMixin from '../../mixins/localize-mixin.js';
import EventsMixin from '../../mixins/events-mixin.js';
/*
* @appliesMixin LocalizeMixin
*/
class HaEntityPicker extends LocalizeMixin(PolymerElement) {
class HaEntityPicker extends EventsMixin(LocalizeMixin(PolymerElement)) {
static get template() {
return html`
<style>
@ -29,7 +30,15 @@ class HaEntityPicker extends LocalizeMixin(PolymerElement) {
display: none;
}
</style>
<vaadin-combo-box-light items="[[_states]]" item-value-path="entity_id" item-label-path="entity_id" value="{{value}}" opened="{{opened}}" allow-custom-value="[[allowCustomEntity]]">
<vaadin-combo-box-light
items="[[_states]]"
item-value-path="entity_id"
item-label-path="entity_id"
value="{{value}}"
opened="{{opened}}"
allow-custom-value="[[allowCustomEntity]]"
on-change='_fireChanged'
>
<paper-input autofocus="[[autofocus]]" label="[[_computeLabel(label, localize)]]" class="input" value="[[value]]" disabled="[[disabled]]">
<paper-icon-button slot="suffix" class="clear-button" icon="mdi:close" no-ripple="" hidden\$="[[!value]]">Clear</paper-icon-button>
<paper-icon-button slot="suffix" class="toggle-button" icon="[[_computeToggleIcon(opened)]]" hidden="[[!_states.length]]">Toggle</paper-icon-button>
@ -135,6 +144,11 @@ class HaEntityPicker extends LocalizeMixin(PolymerElement) {
_computeToggleIcon(opened) {
return opened ? 'mdi:menu-up' : 'mdi:menu-down';
}
_fireChanged(ev) {
ev.stopPropagation();
this.fire('change');
}
}
customElements.define('ha-entity-picker', HaEntityPicker);

View File

@ -5,7 +5,9 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import '@vaadin/vaadin-combo-box/vaadin-combo-box-light.js';
class HaComboBox extends PolymerElement {
import EventsMixin from '../mixins/events-mixin.js';
class HaComboBox extends EventsMixin(PolymerElement) {
static get template() {
return html`
<style>
@ -19,7 +21,15 @@ class HaComboBox extends PolymerElement {
display: none;
}
</style>
<vaadin-combo-box-light items="[[_items]]" item-value-path="[[itemValuePath]]" item-label-path="[[itemLabelPath]]" value="{{value}}" opened="{{opened}}" allow-custom-value="[[allowCustomValue]]">
<vaadin-combo-box-light
items="[[_items]]"
item-value-path="[[itemValuePath]]"
item-label-path="[[itemLabelPath]]"
value="{{value}}"
opened="{{opened}}"
allow-custom-value="[[allowCustomValue]]"
on-change='_fireChanged'
>
<paper-input autofocus="[[autofocus]]" label="[[label]]" class="input" value="[[value]]">
<paper-icon-button slot="suffix" class="clear-button" icon="mdi:close" hidden\$="[[!value]]">Clear</paper-icon-button>
<paper-icon-button slot="suffix" class="toggle-button" icon="[[_computeToggleIcon(opened)]]" hidden\$="[[!items.length]]">Toggle</paper-icon-button>
@ -79,6 +89,11 @@ class HaComboBox extends PolymerElement {
_computeItemLabel(item, itemLabelPath) {
return itemLabelPath ? item[itemLabelPath] : item;
}
_fireChanged(ev) {
ev.stopPropagation();
this.fire('change');
}
}
customElements.define('ha-combo-box', HaComboBox);