@vaadin/vaadin-combo-box 5.4.8 → 5.4.12

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.8",
+  "version": "5.4.12",
   "main": "vaadin-combo-box.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",
@@ -25,8 +25,6 @@
     "theme"
   ],
   "resolutions": {
-    "es-abstract": "1.17.6",
-    "@types/doctrine": "0.0.3",
     "inherits": "2.0.3",
     "samsam": "1.1.3",
     "supports-color": "3.1.2",
@@ -48,9 +46,12 @@
     "@vaadin/vaadin-element-mixin": "^2.4.1"
   },
   "scripts": {
-    "generate-typings": "gen-typescript-declarations --outDir . --verify"
+    "generate-typings": "gen-typescript-declarations --outDir . --verify",
+    "test": "wct --npm"
   },
   "devDependencies": {
+    "@web-padawan/gen-typescript-declarations": "^1.6.2",
+    "web-component-tester": "6.9.2",
     "@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-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

@@ -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();
       }
     }
   }
@@ -684,13 +704,19 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
       }
     } else {
       const toLowerCase = (item) => item && item.toLowerCase && item.toLowerCase();
-      const itemsMatchedByLabel = this.filteredItems
-        && this.filteredItems.filter(item => toLowerCase(this._getItemLabel(item)) === toLowerCase(this._inputElementValue))
-        || [];
+
+      // Try to find an item whose label matches the input value. A matching item is searched from
+      // the filteredItems array (if available) and the selectedItem (if available).
+      const itemMatchingByLabel = [...(this.filteredItems || []), this.selectedItem].filter((item) => {
+        return toLowerCase(this._getItemLabel(item)) === toLowerCase(this._inputElementValue);
+      })[0];
+
       if (this.allowCustomValue
         // to prevent a repetitive input value being saved after pressing ESC and Tab.
-        && !itemsMatchedByLabel.length) {
+        && !itemMatchingByLabel) {
 
+        // An item matching by label was not found, but custom values are allowed.
+        // Dispatch a custom-value-set event with the input value.
         const e = new CustomEvent('custom-value-set', {detail: this._inputElementValue, composed: true, cancelable: true, bubbles: true});
         this.dispatchEvent(e);
         if (!e.defaultPrevented) {
@@ -698,9 +724,11 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
           this._selectItemForValue(customValue);
           this.value = customValue;
         }
-      } else if (!this.allowCustomValue && !this.opened && itemsMatchedByLabel.length > 0) {
-        this.value = this._getItemValue(itemsMatchedByLabel[0]);
+      } else if (!this.allowCustomValue && !this.opened && itemMatchingByLabel) {
+        // An item matching by label was found, select it.
+        this.value = this._getItemValue(itemMatchingByLabel);
       } else {
+        // Revert the input value
         this._inputElementValue = this.selectedItem ? this._getItemLabel(this.selectedItem) : (this.value || '');
       }
     }

package/src/vaadin-combo-box.js

@@ -229,7 +229,7 @@ class ComboBoxElement extends
   }
 
   static get version() {
-    return '5.4.8';
+    return '5.4.12';
   }
 
   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);