@vaadin/combo-box 23.0.10 → 23.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "23.0.10",
+  "version": "23.0.11",
   "publishConfig": {
     "access": "public"
   },
@@ -34,23 +34,23 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^23.0.10",
-    "@vaadin/field-base": "^23.0.10",
-    "@vaadin/input-container": "^23.0.10",
-    "@vaadin/item": "^23.0.10",
-    "@vaadin/vaadin-lumo-styles": "^23.0.10",
-    "@vaadin/vaadin-material-styles": "^23.0.10",
-    "@vaadin/vaadin-overlay": "^23.0.10",
-    "@vaadin/vaadin-themable-mixin": "^23.0.10"
+    "@vaadin/component-base": "^23.0.11",
+    "@vaadin/field-base": "^23.0.11",
+    "@vaadin/input-container": "^23.0.11",
+    "@vaadin/item": "^23.0.11",
+    "@vaadin/vaadin-lumo-styles": "^23.0.11",
+    "@vaadin/vaadin-material-styles": "^23.0.11",
+    "@vaadin/vaadin-overlay": "^23.0.11",
+    "@vaadin/vaadin-themable-mixin": "^23.0.11"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/dialog": "^23.0.10",
-    "@vaadin/polymer-legacy-adapter": "^23.0.10",
+    "@vaadin/dialog": "^23.0.11",
+    "@vaadin/polymer-legacy-adapter": "^23.0.11",
     "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-field": "^23.0.10",
+    "@vaadin/text-field": "^23.0.11",
     "lit": "^2.0.0",
     "sinon": "^9.2.0"
   },
-  "gitHead": "e8402a55ce0e823ae6da5c97486998cfd931b1d3"
+  "gitHead": "10838304fe6f5c98b838ec3a90bdcf49cbf4650b"
 }

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

@@ -74,18 +74,6 @@ export const ComboBoxDataProviderMixin = (superClass) =>
       ];
     }
 
-    /** @private */
-    _dataProviderClearFilter(dataProvider, opened, value) {
-      // Can't depend on filter in this observer as we don't want
-      // to clear the filter whenever it's set
-      if (dataProvider && !this.loading && this.filter && !(opened && this.autoOpenDisabled && value === this.filter)) {
-        this.size = undefined;
-        this._pendingRequests = {};
-        this.filter = '';
-        this.clearCache();
-      }
-    }
-
     /** @protected */
     ready() {
       super.ready();
@@ -118,8 +106,32 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         return;
       }
 
+      this._refreshData();
+    }
+
+    /** @private */
+    _dataProviderClearFilter(dataProvider, opened, value) {
+      // Can't depend on filter in this observer as we don't want
+      // to clear the filter whenever it's set
+      if (dataProvider && !this.loading && this.filter && !(opened && this.autoOpenDisabled && value === this.filter)) {
+        this._refreshData(true);
+      }
+    }
+
+    /** @private */
+    _refreshData(clearFilter) {
+      // Immediately mark as loading if this refresh leads to re-fetching pages
+      // This prevents some issues with the properties below triggering
+      // observers that also rely on the loading state
+      this.loading = this._shouldFetchData();
+      // Reset size and internal loading state
       this.size = undefined;
       this._pendingRequests = {};
+      // Clear filter if requested
+      if (clearFilter) {
+        this.filter = '';
+      }
+      // Clear cached pages, and reload current page if we need the data
       this.clearCache();
     }
 

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

@@ -423,12 +423,29 @@ export const ComboBoxMixin = (subclass) =>
       }
     }
 
+    /**
+     * @param {Event} event
+     * @private
+     */
+    _onToggleButtonClick(event) {
+      // Prevent parent components such as `vaadin-grid`
+      // from handling the click event after it bubbles.
+      event.preventDefault();
+
+      if (this.opened) {
+        this.close();
+      } else {
+        this.open();
+      }
+    }
+
     /**
      * @param {Event} event
      * @protected
      */
-    _onHostClick(_event) {
+    _onHostClick(event) {
       if (!this.autoOpenDisabled) {
+        event.preventDefault();
         this.open();
       }
     }
@@ -442,11 +459,7 @@ export const ComboBoxMixin = (subclass) =>
       if (this._isClearButton(e)) {
         this._handleClearButtonClick(e);
       } else if (path.indexOf(this._toggleElement) > -1) {
-        if (this.opened) {
-          this.close();
-        } else {
-          this.open();
-        }
+        this._onToggleButtonClick(e);
       } else {
         this._onHostClick(e);
       }

package/theme/material/vaadin-combo-box-dropdown-styles.js

@@ -1,4 +1,5 @@
 import '@vaadin/vaadin-material-styles/color.js';
+import '@vaadin/vaadin-overlay/theme/material/vaadin-overlay.js';
 import { menuOverlay } from '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';