@vaadin/combo-box 22.0.10 → 22.0.11

package/package.json

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

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

@@ -564,20 +564,27 @@ export const ComboBoxMixin = (subclass) =>
 
     /** @private */
     _onEnter(e) {
-      // should close on enter when custom values are allowed, input field is cleared, or when an existing
-      // item is focused with keyboard. If auto open is disabled, under the same conditions, commit value.
-      if (
-        (this.opened || this.autoOpenDisabled) &&
-        (this.allowCustomValue || this._inputElementValue === '' || this._focusedIndex > -1)
-      ) {
-        this._closeOrCommit();
-
+      // do not commit value when custom values are disallowed and input value is not a valid option
+      // also stop propagation of the event, otherwise the user could submit a form while the input
+      // still contains an invalid value
+      if (!this.allowCustomValue && this._inputElementValue !== '' && this._focusedIndex < 0) {
         // Do not submit the surrounding form.
         e.preventDefault();
+        // Do not trigger global listeners
+        e.stopPropagation();
+        return;
+      }
 
+      // stop propagation of the enter event only if the dropdown is opened, this
+      // "consumes" the enter event for the action of closing the dropdown
+      if (this.opened) {
+        // Do not submit the surrounding form.
+        e.preventDefault();
         // Do not trigger global listeners
         e.stopPropagation();
       }
+
+      this._closeOrCommit();
     }
 
     /**
@@ -950,17 +957,23 @@ export const ComboBoxMixin = (subclass) =>
       if (e.path === 'filteredItems' || e.path === 'filteredItems.splices') {
         this._setOverlayItems(this.filteredItems);
 
-        this._focusedIndex =
-          this.opened || this.autoOpenDisabled
-            ? this.$.dropdown.indexOfLabel(this.filter)
-            : this._indexOfValue(this.value, this.filteredItems);
+        // When the external filtering is used and `value` was provided before `filteredItems`,
+        // initialize the selected item with the current value here. This will also cause
+        // the input element value to sync. In other cases, the selected item is already initialized
+        // in other observers such as `valueChanged`, `_itemsOrPathsChanged`.
+        const valueIndex = this._indexOfValue(this.value, this.filteredItems);
+        if (this.selectedItem === null && valueIndex >= 0) {
+          this._selectItemForValue(this.value);
+        }
 
-        // see https://github.com/vaadin/web-components/issues/2615
-        if (this.selectedItem === null && this._focusedIndex >= 0) {
-          const filteredItem = this.filteredItems[this._focusedIndex];
-          if (this._getItemValue(filteredItem) === this.value) {
-            this._selectItemForValue(this.value);
-          }
+        if (this._inputElementValue === undefined || this._inputElementValue === this.value) {
+          // When the input element value is the same as the current value or not defined,
+          // set the focused index to the item that matches the value.
+          this._focusedIndex = this._indexOfValue(this.value, this.filteredItems);
+        } else {
+          // When the user filled in something that is different from the current value = filtering is enabled,
+          // set the focused index to the item that matches the filter query.
+          this._focusedIndex = this.$.dropdown.indexOfLabel(this.filter);
         }
       }
     }
@@ -985,12 +998,13 @@ export const ComboBoxMixin = (subclass) =>
       const valueIndex = this._indexOfValue(value, this.filteredItems);
       const previouslySelectedItem = this.selectedItem;
 
-      this.selectedItem =
-        valueIndex >= 0
-          ? this.filteredItems[valueIndex]
-          : this.dataProvider && this.selectedItem === undefined
-          ? undefined
-          : null;
+      if (valueIndex >= 0) {
+        this.selectedItem = this.filteredItems[valueIndex];
+      } else if (this.dataProvider && this.selectedItem === undefined) {
+        this.selectedItem = undefined;
+      } else {
+        this.selectedItem = null;
+      }
 
       if (this.selectedItem === null && previouslySelectedItem === null) {
         this._selectedItemChanged(this.selectedItem);
@@ -1014,15 +1028,17 @@ export const ComboBoxMixin = (subclass) =>
 
     /** @private */
     _indexOfValue(value, items) {
-      if (items && this._isValidValue(value)) {
-        for (let i = 0; i < items.length; i++) {
-          if (items[i] !== this.__placeHolder && this._getItemValue(items[i]) === value) {
-            return i;
-          }
-        }
+      if (!items || !this._isValidValue(value)) {
+        return -1;
       }
 
-      return -1;
+      return items.findIndex((item) => {
+        if (item instanceof ComboBoxPlaceholder) {
+          return false;
+        }
+
+        return this._getItemValue(item) === value;
+      });
     }
 
     /**

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

@@ -251,9 +251,16 @@ export class ComboBoxScroller extends PolymerElement {
   }
 
   /** @private */
-  __focusedIndexChanged(index) {
-    if (this.__virtualizer && index >= 0) {
+  __focusedIndexChanged(index, oldIndex) {
+    if (!this.__virtualizer) {
+      return;
+    }
+
+    if (index !== oldIndex) {
       this.requestContentUpdate();
+    }
+
+    if (index >= 0) {
       this.scrollIntoView(index);
     }
   }