@vaadin/vaadin-combo-box 5.4.10 → 5.4.11

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.10",
+  "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",
+    "generate-typings": "gen-typescript-declarations --outDir . --verify"
+  },
+  "devDependencies": {
     "@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

@@ -44,6 +44,17 @@ 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);
@@ -72,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);
@@ -95,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>
 `;
@@ -142,7 +166,6 @@ class ComboBoxDropdownElement extends DisableUpgradeMixin(
   constructor() {
     super();
     this._boundSetPosition = this._setPosition.bind(this);
-    this._boundOutsideClickListener = this._outsideClickListener.bind(this);
   }
 
   connectedCallback() {
@@ -198,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.js

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