Selecting a value from the dropdown list changes vaadin-combo-box's
value property and triggers a value-changed event.
Changing the value property explicitly also updates the visible fields.
Selected value: .
HTMLImports.whenReady(function() {
// code
var combobox = combobox || document.querySelector('vaadin-combo-box');
combobox.items = elements;
combobox.addEventListener('value-changed', function() {
document.querySelector('#selected-value').innerHTML = combobox.value;
});
combobox.value = 'Carbon';
// end-code
});
Users can be allowed also to input their own custom values. By default, this feature is disabled, so it needs to be explicitly enabled.
When enabled, custom input values are always accepted and used as the value of the combo box.
If you need to cancel the automatic assignment, you can provide your own listener for the custom-value-set event
that prevents the default behavior.
Selected value:
HTMLImports.whenReady(function() {
// code
var combobox = document.querySelectorAll('vaadin-combo-box')[1];
combobox.items = elements;
combobox.addEventListener('value-changed', function() {
document.querySelector('#selected-value2').innerHTML = combobox.value;
});
combobox.addEventListener('custom-value-set', function(e) {
// Prevents setting the value property automatically.
e.preventDefault();
combobox.value = e.detail;
document.querySelector('#selected-value2').innerHTML = 'custom value "' + e.detail + '" set!';
});
combobox.value = 'Carbon';
// end-code
});
The vaadin-combo-box element is also extended with
IronFormElementBehavior
so it can be used as a field in an iron-form.
See the code below for an example on how it works.
HTMLImports.whenReady(function() {
// code
var form = form || document.querySelector('form');
var combobox = form.querySelector('vaadin-combo-box');
combobox.items = elements;
form.addEventListener('iron-form-submit', function() {
alert('Form submitted with name: ' + form.serialize().name);
return false;
});
// end-code
});