@vaadin/vaadin-combo-box 5.4.5 → 5.4.9

package/README.md

@@ -1,21 +1,18 @@
-[![npm latest version](https://badgen.net/npm/v/@vaadin/vaadin-combo-box/latest)](https://www.npmjs.com/package/@vaadin/vaadin-combo-box)
-[![npm next version](https://badgen.net/npm/v/@vaadin/vaadin-combo-box/next)](https://www.npmjs.com/package/@vaadin/vaadin-combo-box)
-[![Bower version](https://badgen.net/github/release/vaadin/vaadin-combo-box)](https://github.com/vaadin/vaadin-combo-box/releases)
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-combo-box)
-[![Build Status](https://travis-ci.org/vaadin/vaadin-combo-box.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-combo-box)
-[![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-combo-box/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-combo-box?branch=master)
-[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+# <vaadin-combo-box>
 
-[![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-combo-box)
-[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-combo-box.svg)](https://vaadin.com/directory/component/vaadinvaadin-combo-box)
+> ⚠️ Starting from Vaadin 20, the source code and issues for this component are migrated to the [`vaadin/web-components`](https://github.com/vaadin/web-components/tree/master/packages/vaadin-combo-box) monorepository.
+> This repository contains the source code and releases of `<vaadin-combo-box>` for the Vaadin versions 10 to 19.
 
-# &lt;vaadin-combo-box&gt;
+[&lt;vaadin-combo-box&gt;](https://vaadin.com/components/vaadin-combo-box) is a Web Component combining a dropdown list with an input field for filtering the list of items, part of the [Vaadin components](https://vaadin.com/components).
 
 [Live Demo ↗](https://vaadin.com/components/vaadin-combo-box/html-examples)
 |
 [API documentation ↗](https://vaadin.com/components/vaadin-combo-box/html-api)
 
-[&lt;vaadin-combo-box&gt;](https://vaadin.com/components/vaadin-combo-box) is a Web Component combining a dropdown list with an input field for filtering the list of items, part of the [Vaadin components](https://vaadin.com/components).
+[![npm latest version](https://badgen.net/npm/v/@vaadin/vaadin-combo-box/latest)](https://www.npmjs.com/package/@vaadin/vaadin-combo-box)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-combo-box)
+[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-combo-box)
+[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 <!--
 ```
@@ -95,18 +92,18 @@ To use the Material theme, import the correspondent file from the `theme/materia
 
 - The components with the Lumo theme:
 
-  `theme/lumo/vaadin-combo-box.html`  
+  `theme/lumo/vaadin-combo-box.html`
   `theme/lumo/vaadin-combo-box-light.html`
 
 - The components with the Material theme:
 
-  `theme/material/vaadin-combo-box.html`  
+  `theme/material/vaadin-combo-box.html`
   `theme/material/vaadin-combo-box-light.html`
 
-- Alias for `theme/lumo/vaadin-combo-box.html`  
+- Alias for `theme/lumo/vaadin-combo-box.html`
   `theme/lumo/vaadin-combo-box-light.html`
 
-  `vaadin-combo-box.html`  
+  `vaadin-combo-box.html`
   `vaadin-combo-box-light.html`
 
 

package/package.json

@@ -10,7 +10,7 @@
   "repository": "vaadin/vaadin-combo-box",
   "homepage": "https://vaadin.com/components",
   "name": "@vaadin/vaadin-combo-box",
-  "version": "5.4.5",
+  "version": "5.4.9",
   "main": "vaadin-combo-box.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",
@@ -48,9 +48,9 @@
     "@vaadin/vaadin-element-mixin": "^2.4.1"
   },
   "scripts": {
-    "generate-typings": "gen-typescript-declarations --outDir . --verify"
-  },
-  "devDependencies": {
+  "generate-typings": "gen-typescript-declarations --outDir . --verify"
+},
+"devDependencies": {
     "@polymer/iron-form": "^3.0.0",
     "@polymer/iron-component-page": "^4.0.0",
     "@polymer/iron-test-helpers": "^3.0.0",

package/src/vaadin-combo-box-data-provider-mixin.js

@@ -94,6 +94,17 @@ export const ComboBoxDataProviderMixin = superClass => class DataProviderMixin e
     this.clearCache();
     this.$.overlay.addEventListener('index-requested', e => {
       const index = e.detail.index;
+      const currentScrollerPos = e.detail.currentScrollerPos;
+      const allowedIndexRange = Math.floor(this.pageSize * 1.5);
+
+      // Ignores the indexes, which are being re-sent during scrolling reset,
+      // if the corresponding page is around the current scroller position.
+      // Otherwise, there might be a last pages duplicates, which cause the
+      // loading indicator hanging and blank items
+      if (this._shouldSkipIndex(index, allowedIndexRange, currentScrollerPos)) {
+        return;
+      }
+
       if (index !== undefined) {
         const page = this._getPageForIndex(index);
         if (this._shouldLoadPage(page)) {
@@ -132,6 +143,13 @@ export const ComboBoxDataProviderMixin = superClass => class DataProviderMixin e
     }
   }
 
+  /** @private */
+  _shouldSkipIndex(index, allowedIndexRange, currentScrollerPos) {
+    return currentScrollerPos !== 0 &&
+        index >= currentScrollerPos - allowedIndexRange &&
+        index <= currentScrollerPos + allowedIndexRange;
+  }
+
   /** @private */
   _shouldLoadPage(page) {
     if (!this.filteredItems || this._forceNextRequest) {
@@ -188,8 +206,13 @@ export const ComboBoxDataProviderMixin = superClass => class DataProviderMixin e
           }
         }
       };
-      this._pendingRequests[page] = callback;
-      this.dataProvider(params, callback);
+
+      if (!this._pendingRequests[page]) {
+        // Don't request page if it's already being requested
+        this._pendingRequests[page] = callback;
+        this.dataProvider(params, callback);
+      }
+
     }
   }
 

package/src/vaadin-combo-box-dropdown-wrapper.js

@@ -48,7 +48,7 @@ class ComboBoxDropdownWrapperElement extends (class extends PolymerElement {}) {
         <div id="scroller" on-click="_stopPropagation">
           <iron-list id="selector" role="listbox" items="[[_getItems(opened, _items)]]" scroll-target="[[_scroller]]">
             <template>
-              <vaadin-combo-box-item on-click="_onItemClick" index="[[__requestItemByIndex(item, index)]]" item="[[item]]" label="[[getItemLabel(item, _itemLabelPath)]]" selected="[[_isItemSelected(item, _selectedItem, _itemIdPath)]]" renderer="[[renderer]]" role\$="[[_getAriaRole(index)]]" aria-selected\$="[[_getAriaSelected(_focusedIndex,index)]]" focused="[[_isItemFocused(_focusedIndex,index)]]" tabindex="-1" theme\$="[[theme]]">
+              <vaadin-combo-box-item on-click="_onItemClick" index="[[__requestItemByIndex(item, index, _resetScrolling)]]" item="[[item]]" label="[[getItemLabel(item, _itemLabelPath)]]" selected="[[_isItemSelected(item, _selectedItem, _itemIdPath)]]" renderer="[[renderer]]" role\$="[[_getAriaRole(index)]]" aria-selected\$="[[_getAriaSelected(_focusedIndex,index)]]" focused="[[_isItemFocused(_focusedIndex,index)]]" tabindex="-1" theme\$="[[theme]]">
               </vaadin-combo-box-item>
             </template>
           </iron-list>
@@ -102,21 +102,21 @@ class ComboBoxDropdownWrapperElement extends (class extends PolymerElement {}) {
       theme: String,
 
       /**
-       * Used to recognize scroller reset after new items have been set
-       * to iron-list and to ignore unwanted pages load. If 'true', then
-       * skip loading of the pages until it becomes 'false'.
+       * Used to recognize if the filter changed, so to skip the
+       * scrolling restore. If true, then scroll to 0 position. Restore
+       * the previous position otherwise.
        */
-      resetScrolling: {
+      filterChanged: {
         type: Boolean,
         value: false
       },
 
       /**
-       * Used to recognize if the filter changed, so to skip the
-       * scrolling restore. If true, then scroll to 0 position. Restore
-       * the previous position otherwise.
+       * Used to recognize scroller reset after new items have been set
+       * to iron-list and to ignore unwanted pages load. If 'true', then
+       * skip loading of the pages until it becomes 'false'.
        */
-      filterChanged: {
+      _resetScrolling: {
         type: Boolean,
         value: false
       },
@@ -188,7 +188,7 @@ class ComboBoxDropdownWrapperElement extends (class extends PolymerElement {}) {
         const currentScrollerPosition = this._selector.firstVisibleIndex;
         if (currentScrollerPosition !== 0) {
           this._oldScrollerPosition = currentScrollerPosition;
-          this.resetScrolling = true;
+          this._resetScrolling = true;
         }
       }
       // Let the position to be restored in the future calls unless it's not
@@ -203,7 +203,7 @@ class ComboBoxDropdownWrapperElement extends (class extends PolymerElement {}) {
     if (this._isNotEmpty(items) && this._selector && this._oldScrollerPosition !== 0) {
       // new items size might be less than old scrolling position
       this._scrollIntoView(Math.min(items.length - 1, this._oldScrollerPosition));
-      this.resetScrolling = false;
+      this._resetScrolling = false;
       // reset position to 0 again in order to properly handle the filter
       // cases (scroll to 0 after typing the filter)
       this._oldScrollerPosition = 0;
@@ -358,10 +358,11 @@ class ComboBoxDropdownWrapperElement extends (class extends PolymerElement {}) {
    *
    * @return {number}
    */
-  __requestItemByIndex(item, index) {
+  __requestItemByIndex(item, index, resetScrolling) {
     if ((item instanceof ComboBoxPlaceholder) && index !==
-            undefined && !this.resetScrolling) {
-      this.dispatchEvent(new CustomEvent('index-requested', {detail: {index}}));
+            undefined && !resetScrolling) {
+      this.dispatchEvent(new CustomEvent('index-requested', {detail:
+                {index: index, currentScrollerPos: this._oldScrollerPosition}}));
     }
 
     return index;

package/src/vaadin-combo-box-dropdown.js

@@ -23,6 +23,9 @@ $_documentContainer.innerHTML = `<dom-module id="vaadin-combo-box-overlay-styles
 </dom-module>`;
 
 document.head.appendChild($_documentContainer.content);
+let memoizedTemplate;
+
+
 /**
  * The overlay element.
  *
@@ -41,6 +44,15 @@ class ComboBoxOverlayElement extends OverlayElement {
     return 'vaadin-combo-box-overlay';
   }
 
+  static get template() {
+    if (!memoizedTemplate) {
+      memoizedTemplate = super.template.cloneNode(true);
+      memoizedTemplate.content.querySelector('[part~="overlay"]').removeAttribute('tabindex');
+    }
+
+    return memoizedTemplate;
+  }
+
   connectedCallback() {
     super.connectedCallback();
 

package/src/vaadin-combo-box-mixin.js

@@ -260,7 +260,7 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
       '_filteredItemsChanged(filteredItems.*, itemValuePath, itemLabelPath)',
       '_templateOrRendererChanged(_itemTemplate, renderer)',
       '_loadingChanged(loading)',
-      '_selectedItemChanged(selectedItem, itemLabelPath)',
+      '_selectedItemChanged(selectedItem, itemValuePath, itemLabelPath)',
       '_toggleElementChanged(_toggleElement)'
     ];
   }
@@ -683,8 +683,9 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
         this.value = '';
       }
     } else {
+      const toLowerCase = (item) => item && item.toLowerCase && item.toLowerCase();
       const itemsMatchedByLabel = this.filteredItems
-        && this.filteredItems.filter(item => this._getItemLabel(item) === this._inputElementValue)
+        && this.filteredItems.filter(item => toLowerCase(this._getItemLabel(item)) === toLowerCase(this._inputElementValue))
         || [];
       if (this.allowCustomValue
         // to prevent a repetitive input value being saved after pressing ESC and Tab.
@@ -697,7 +698,7 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
           this._selectItemForValue(customValue);
           this.value = customValue;
         }
-      } else if (!this.allowCustomValue && !this.opened && itemsMatchedByLabel.length == 1) {
+      } else if (!this.allowCustomValue && !this.opened && itemsMatchedByLabel.length > 0) {
         this.value = this._getItemValue(itemsMatchedByLabel[0]);
       } else {
         this._inputElementValue = this.selectedItem ? this._getItemLabel(this.selectedItem) : (this.value || '');
@@ -897,11 +898,13 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
 
   /** @private */
   _itemsOrPathsChanged(e, itemValuePath, itemLabelPath) {
-    if (e.value === undefined) {
-      return;
-    }
     if (e.path === 'items' || e.path === 'items.splices') {
-      this.filteredItems = this.items ? this.items.slice(0) : this.items;
+      if (this.items) {
+        this.filteredItems = this.items.slice(0);
+      } else if (this.__previousItems) {
+        // Only clear filteredItems if the component had items previously but got cleared
+        this.filteredItems = null;
+      }
 
       const valueIndex = this._indexOfValue(this.value, this.items);
       this._focusedIndex = valueIndex;
@@ -911,13 +914,11 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
         this.selectedItem = item;
       }
     }
+    this.__previousItems = e.value;
   }
 
   /** @private */
   _filteredItemsChanged(e, itemValuePath, itemLabelPath) {
-    if (e.value === undefined) {
-      return;
-    }
     if (e.path === 'filteredItems' || e.path === 'filteredItems.splices') {
       this._setOverlayItems(this.filteredItems);
 
@@ -943,7 +944,7 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
       return this._getItemLabel(item).toString().toLowerCase().indexOf(filter) > -1;
     });
 
-    return !filteredItems.length && this.autoOpenDisabled ? arr : filteredItems;
+    return filteredItems;
   }
 
   /** @private */
@@ -1045,7 +1046,7 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
       event.composedPath()[0].focus();
       return;
     }
-    if (!this._closeOnBlurIsPrevented) {
+    if (!this.readonly && !this._closeOnBlurIsPrevented) {
       this._closeOrCommit();
     }
   }

package/src/vaadin-combo-box.js

@@ -229,7 +229,7 @@ class ComboBoxElement extends
   }
 
   static get version() {
-    return '5.4.5';
+    return '5.4.9';
   }
 
   static get properties() {