v1.3.2 – Maintenance Release

Changes:

• Clear button doesn't cover content anymore (#406) (Thanks @web-padawan!)

v1.3.1 – Maintenance Release

Changes:

• <vaadin-combo-box> can now be focused programmatically (#349)
• Clear Icon is now hidden when disabled (#407)

v1.3.0 — Custom Item Templates

New Features

Custom Item Templates

You can customize the layout and styles of the items in the dropdown/overlay list by adding a <template> element inside the light DOM of <vaadin-combo-box>.

<!-- Using a simple string array as the items -->
<vaadin-combo-box items='["foo", "bar", "baz"]'>
  <!-- Make the item text bold -->
  <template>
    <b>[[item]]</b>
  </template>
</vaadin-combo-box>

See Live Demos

Other Changes Since v1.2.0

• 688bedf Document need of item-label-path in templates. Fixes #381
• 958296c Add paper-item example to docs
• bd09fdf Add paper-item demo
• 0ef5647 Add link to item templates in styling doc. Fixes #384
• 075b863 Set hasValue readOnly. Fixes #393
• 528ca86 Show clear button even if overlay is not shown, fix #238
• d8054da Make dropdown modal by setting body pointer-events: none
• 953491f Use webcomponents-lite.js for Edge, webcomponentsjs/issues/575
• 2395da2 Fix FF tests with focused input
• 63b3e40 Remove angular2 tests
• 5736556 Fix toggling overlay for combo-box-light, fix #380
• 82b6f41 WCT: webcomponents-lite.js -> webcomponents.js
• af32d4c Fix duplicate menu title for item itemplate asciidoc guide
• a2947aa Update package.json and bower.json

v1.3.0-beta1 — Custom Item Templates

New Features

Custom Item Templates

You can customize the layout and styles of the items in the dropdown/overlay list by adding a <template> element inside the light DOM of <vaadin-combo-box>.

<!-- Using a simple string array as the items -->
<vaadin-combo-box items='["foo", "bar", "baz"]'>
  <!-- Make the item text bold -->
  <template>
    <b>[[item]]</b>
  </template>
</vaadin-combo-box>

See Live Demos

Changes since v1.3.0-alpha1

• 528ca86 Show clear button even if overlay is not shown, fix #238
• d8054da Make dropdown modal by setting body pointer-events: none
• 953491f Use webcomponents-lite.js for Edge, webcomponentsjs/issues/575
• 2395da2 Fix FF tests with focused input
• 63b3e40 Remove angular2 tests
• 5736556 Fix toggling overlay for combo-box-light, fix #380
• 82b6f41 WCT: webcomponents-lite.js -> webcomponents.js

v1.3.0-alpha1 - Custom Item Templates

New Features

Custom Item Templates

You can customize the layout and styles of the items in the dropdown/overlay list by adding a <template> element inside the light DOM of <vaadin-combo-box>.

<!-- Using a simple string array as the items -->
<vaadin-combo-box items='["foo", "bar", "baz"]'>
  <!-- Make the item text bold -->
  <template>
    <b>[[item]]</b>
  </template>
</vaadin-combo-box>

See Live Demos

Changes since v1.2.0

• No Fixes

v1.2.0 – Custom and Remote Filtering

New Features

Custom Filtering

• filteredItems and filter can now be used to bypass the built-in client-side filtering

<vaadin-combo-box filtered-items="[[filteredItems]]" on-filter-changed="_filterChanged">
</vaadin-combo-box>

<script>
  ...
  _filterChanged: function(e) {
    var filter = e.detail.value;
    this.filteredItems = elements.filter(function(el) {
      return el.indexOf(filter) === 0;
    });
  }
  ...
</script>

Remote Filtering

• loading can be used to place a loading spinner while new filteredItems are being fetched async

<iron-ajax url="http://example.org/?filter=[[filter]]"
           last-response={{response}}
           loading="{{loading}}"
           debounce-duration="500" auto>
</iron-ajax>

<vaadin-combo-box filtered-items="[[response]]" filter="{{filter}}" loading="[[loading]]">
</vaadin-combo-box>

See Live Demos

Notable Changes

• Screenreader support has been improved
• selectedItem is no longer readOnly

Changes since v1.2.0-beta1

• Fixes to #291, #334, #351

v1.2.0-beta1 – Custom and Remote Filtering

New Features

Custom Filtering

• filteredItems and filter can now be used to bypass the built-in client-side filtering

<vaadin-combo-box filtered-items="[[filteredItems]]" on-filter-changed="_filterChanged">
</vaadin-combo-box>

<script>
  ...
  _filterChanged: function(e) {
    var filter = e.detail.value;
    this.filteredItems = elements.filter(function(el) {
      return el.indexOf(filter) === 0;
    });
  }
  ...
</script>

Remote Filtering

• loading can be used to place a loading spinner while new filteredItems are being fetched async

<iron-ajax url="http://example.org/?filter=[[filter]]"
           last-response={{response}}
           loading="{{loading}}"
           debounce-duration="500" auto>
</iron-ajax>

<vaadin-combo-box filtered-items="[[response]]" filter="{{filter}}" loading="[[loading]]">
</vaadin-combo-box>

See Live Demos

Notable Changes

• Screenreader support has been improved
• selectedItem is no longer readOnly

Changes since v1.2.0-alpha1

• Various bugfixes

v1.2.0-alpha1 – Custom and Remote Filtering

New Features

Custom Filtering

• filteredItems and filter can now be used to bypass the built-in client-side filtering

<vaadin-combo-box filtered-items="[[filteredItems]]" on-filter-changed="_filterChanged">
</vaadin-combo-box>

<script>
  ...
  _filterChanged: function(e) {
    var filter = e.detail.value;
    this.filteredItems = elements.filter(function(el) {
      return el.indexOf(filter) === 0;
    });
  }
  ...
</script>

Remote Filtering

• loading can be used to place a loading spinner while new filteredItems are being fetched async

<iron-ajax url="http://example.org/?filter=[[filter]]"
           last-response={{response}}
           loading="{{loading}}"
           debounce-duration="500" auto>
</iron-ajax>

<vaadin-combo-box filtered-items="[[response]]" filter="{{filter}}" loading="[[loading]]">
</vaadin-combo-box>

See Live Demos

Notable Changes

• Screenreader support has been improved
• selectedItem is no longer readOnly

v1.1.5

Notable Changes:

• Improved support for <iron-list> v.1.3.10
• Overlay position and size now update correctly on IE11
• Text can now be selected on the input field when using <vaadin-combo-box-light>

v1.1.4

Changes:

• Removed deprecated Angular 2 directive. Please use angular2-polymer instead.
• Fixed mouse selection bug on vaadin-combo-box-light(#302).
• Fixed compatibility with iron-list v1.3.9 (#304).

Issues closed in this milestone