fix: consider a value matching selected item label a known value (#3302) (CP: 22.0)

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

@@ -687,17 +687,20 @@ export const ComboBoxMixin = (subclass) =>
         }
       } 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].find((item) => {
+          return toLowerCase(this._getItemLabel(item)) === toLowerCase(this._inputElementValue);
+        });
+
         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,
@@ -710,9 +713,11 @@ export const ComboBoxMixin = (subclass) =>
             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 || '';
         }
       }

packages/combo-box/test/basic.test.js

@@ -241,6 +241,36 @@ describe('Properties', () => {
         input.blur();
         expect(spy.called).to.be.false;
       });
+
+      it('should not fire when the custom value equals the label of the selected item', () => {
+        const spy = sinon.spy();
+        comboBox.addEventListener('custom-value-set', spy);
+        comboBox.selectedItem = {
+          label: 'foo',
+          value: 'bar'
+        };
+
+        comboBox.open();
+        input.value = 'foo';
+        comboBox.close();
+
+        expect(spy.called).to.be.false;
+      });
+
+      it('should fire when the custom value equals the value of the selected item', () => {
+        const spy = sinon.spy();
+        comboBox.addEventListener('custom-value-set', spy);
+        comboBox.selectedItem = {
+          label: 'foo',
+          value: 'bar'
+        };
+
+        comboBox.open();
+        input.value = 'bar';
+        comboBox.close();
+
+        expect(spy.calledOnce).to.be.true;
+      });
     });
   });
 

packages/combo-box/test/scrolling.test.js

@@ -1,5 +1,5 @@
 import { expect } from '@esm-bundle/chai';
-import { aTimeout, fixtureSync, focusout, isIOS } from '@vaadin/testing-helpers';
+import { fixtureSync, focusout, isIOS, nextFrame } from '@vaadin/testing-helpers';
 import './not-animated-styles.js';
 import '../vaadin-combo-box.js';
 import { getSelectedItem, onceScrolled } from './helpers.js';
@@ -95,13 +95,13 @@ describe('scrolling', () => {
 
     it('should make selected item visible after reopen', async () => {
       comboBox.open();
-      await aTimeout(0);
+      await nextFrame();
 
       comboBox.value = comboBox.items[50];
       comboBox.close();
 
       comboBox.open();
-      await aTimeout(0);
+      await nextFrame();
 
       expectSelectedItemPositionToBeVisible();
     });