@vaadin/vaadin-combo-box 5.4.6 → 5.4.10

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.6",
+  "version": "5.4.10",
   "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)'
     ];
   }
@@ -576,16 +576,36 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
    */
   _onEscape(e) {
     if (this.autoOpenDisabled) {
-      this._focusedIndex = -1;
-      this.cancel();
-    } else if (this.opened) {
-      this._stopPropagation(e);
-
-      if (this._focusedIndex > -1) {
+      // Auto-open is disabled
+      if (this.opened || (this.value !== this._inputElementValue && this._inputElementValue.length > 0)) {
+        // The overlay is open or
+        // the input value has changed but the change hasn't been committed, so cancel it.
+        this._stopPropagation(e);
         this._focusedIndex = -1;
-        this._revertInputValue();
-      } else {
         this.cancel();
+      } else if (this.clearButtonVisible && !this.opened && !!this.value) {
+        this._stopPropagation(e);
+        // The clear button is visible and the overlay is closed, so clear the value.
+        this._clear();
+      }
+    } else {
+      // Auto-open is enabled
+      if (this.opened) {
+        // The overlay is open
+        this._stopPropagation(e);
+
+        if (this._focusedIndex > -1) {
+          // An item is focused, revert the input to the filtered value
+          this._focusedIndex = -1;
+          this._revertInputValue();
+        } else {
+          // No item is focused, cancel the change and close the overlay
+          this.cancel();
+        }
+      } else if (this.clearButtonVisible && !!this.value) {
+        this._stopPropagation(e);
+        // The clear button is visible and the overlay is closed, so clear the value.
+        this._clear();
       }
     }
   }
@@ -683,8 +703,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 +718,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 +918,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 +934,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);
 
@@ -1045,7 +1066,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.6';
+    return '5.4.10';
   }
 
   static get properties() {
@@ -358,12 +358,8 @@ class ComboBoxElement extends
     // Stop propagation of Esc in capturing phase so that
     // vaadin-text-field will not handle Esc as a shortcut
     // to clear the value.
-    // We need to set this listener for "this.inputElement"
-    // instead of just "this", otherwise keyboard navigation behaviour
-    // breaks a bit on Safari and some related tests fail.
-    this.inputElement.addEventListener('keydown', e => {
+    this.addEventListener('keydown', e => {
       if (this._isEventKey(e, 'esc')) {
-        this._stopPropagation(e);
         // Trigger _onEscape method of vaadin-combo-box-mixin because
         // bubbling phase is not reached.
         this._onEscape(e);