@vaadin/vaadin-combo-box 5.4.7 → 5.4.11

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.7",
+  "version": "5.4.11",
   "main": "vaadin-combo-box.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",
@@ -33,31 +33,31 @@
     "type-detect": "1.0.0"
   },
   "dependencies": {
-    "@polymer/iron-a11y-keys-behavior": "^3.0.0",
     "@polymer/iron-a11y-announcer": "^3.0.0",
+    "@polymer/iron-a11y-keys-behavior": "^3.0.0",
     "@polymer/iron-list": "^3.0.0",
     "@polymer/iron-resizable-behavior": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
     "@vaadin/vaadin-control-state-mixin": "^2.2.2",
-    "@vaadin/vaadin-overlay": "^3.5.0",
-    "@vaadin/vaadin-text-field": "^2.8.0",
-    "@vaadin/vaadin-themable-mixin": "^1.6.1",
+    "@vaadin/vaadin-element-mixin": "^2.4.1",
+    "@vaadin/vaadin-item": "^2.3.0",
     "@vaadin/vaadin-lumo-styles": "^1.1.1",
     "@vaadin/vaadin-material-styles": "^1.1.2",
-    "@vaadin/vaadin-item": "^2.3.0",
-    "@vaadin/vaadin-element-mixin": "^2.4.1"
+    "@vaadin/vaadin-overlay": "^3.5.0",
+    "@vaadin/vaadin-text-field": "^2.8.0",
+    "@vaadin/vaadin-themable-mixin": "^1.6.1"
   },
   "scripts": {
     "generate-typings": "gen-typescript-declarations --outDir . --verify"
   },
   "devDependencies": {
-    "@polymer/iron-form": "^3.0.0",
     "@polymer/iron-component-page": "^4.0.0",
+    "@polymer/iron-form": "^3.0.0",
     "@polymer/iron-test-helpers": "^3.0.0",
     "@polymer/paper-input": "^3.0.0",
     "@vaadin/vaadin-button": "^2.4.0",
-    "wct-browser-legacy": "^1.0.1",
     "@vaadin/vaadin-demo-helpers": "^3.1.0",
-    "@vaadin/vaadin-dialog": "^2.5.0"
+    "@vaadin/vaadin-dialog": "^2.5.0",
+    "wct-browser-legacy": "^1.0.1"
   }
 }

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,26 @@ class ComboBoxOverlayElement extends OverlayElement {
     return 'vaadin-combo-box-overlay';
   }
 
+  static get properties() {
+    return {
+      /**
+       * The element to position/align the dropdown by.
+       */
+      positionTarget: {
+        type: Object
+      }
+    };
+  }
+
+  static get template() {
+    if (!memoizedTemplate) {
+      memoizedTemplate = super.template.cloneNode(true);
+      memoizedTemplate.content.querySelector('[part~="overlay"]').removeAttribute('tabindex');
+    }
+
+    return memoizedTemplate;
+  }
+
   connectedCallback() {
     super.connectedCallback();
 
@@ -60,6 +83,19 @@ class ComboBoxOverlayElement extends OverlayElement {
     const content = this.shadowRoot.querySelector('[part~="content"]');
     content.parentNode.insertBefore(loader, content);
   }
+
+  /**
+   * Override OverlayElement._outsideClickListener to prevent closing the
+   * overlay when clicking into the combo box input element
+   * @param event
+   * @private
+   */
+  _outsideClickListener(event) {
+    const eventPath = event.composedPath();
+    if (eventPath.indexOf(this.positionTarget) < 0 && eventPath.indexOf(this) < 0) {
+      this.close();
+    }
+  }
 }
 
 customElements.define(ComboBoxOverlayElement.is, ComboBoxOverlayElement);
@@ -83,7 +119,7 @@ class ComboBoxDropdownElement extends DisableUpgradeMixin(
         display: none;
       }
     </style>
-    <vaadin-combo-box-overlay id="overlay" hidden\$="[[hidden]]" opened="[[opened]]" template="{{template}}" style="align-items: stretch; margin: 0;" theme\$="[[theme]]">
+    <vaadin-combo-box-overlay id="overlay" hidden\$="[[hidden]]" position-target="[[positionTarget]]" opened="{{opened}}" template="{{template}}" style="align-items: stretch; margin: 0;" theme\$="[[theme]]">
       <slot></slot>
     </vaadin-combo-box-overlay>
 `;
@@ -130,7 +166,6 @@ class ComboBoxDropdownElement extends DisableUpgradeMixin(
   constructor() {
     super();
     this._boundSetPosition = this._setPosition.bind(this);
-    this._boundOutsideClickListener = this._outsideClickListener.bind(this);
   }
 
   connectedCallback() {
@@ -186,26 +221,13 @@ class ComboBoxDropdownElement extends DisableUpgradeMixin(
       this._setPosition();
 
       window.addEventListener('scroll', this._boundSetPosition, true);
-      document.addEventListener('click', this._boundOutsideClickListener, true);
       this.dispatchEvent(new CustomEvent('vaadin-combo-box-dropdown-opened', {bubbles: true, composed: true}));
     } else if (!this.__emptyItems) {
       window.removeEventListener('scroll', this._boundSetPosition, true);
-      document.removeEventListener('click', this._boundOutsideClickListener, true);
       this.dispatchEvent(new CustomEvent('vaadin-combo-box-dropdown-closed', {bubbles: true, composed: true}));
     }
   }
 
-
-  // We need to listen on 'click' event and capture it and close the overlay before
-  // propagating the event to the listener in the button. Otherwise, if the clicked button would call
-  // open(), this would happen: https://www.youtube.com/watch?v=Z86V_ICUCD4
-  _outsideClickListener(event) {
-    const eventPath = event.composedPath();
-    if (eventPath.indexOf(this.positionTarget) < 0 && eventPath.indexOf(this.$.overlay) < 0) {
-      this.opened = false;
-    }
-  }
-
   _isPositionFixed(element) {
     const offsetParent = this._getOffsetParent(element);
 

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 || '');
@@ -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.7';
+    return '5.4.11';
   }
 
   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);