fix: Make dataprovider filtering case-insensitive (#1007)

cherry-pick: #1006 Fixes: vaadin/flow-components#915
vaadin · May 17, 2021 · 11f2cbc · 11f2cbc
1 parent 65eb308
commit 11f2cbc
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 8 deletions.
diff --git a/src/vaadin-combo-box-mixin.js b/src/vaadin-combo-box-mixin.js
@@ -670,9 +670,12 @@ export const ComboBoxMixin = (subclass) =>
           this.value = '';
         }
       } else {
+        const toLowerCase = (item) => item && item.toLowerCase && item.toLowerCase();
         const itemsMatchedByLabel =
           (this.filteredItems &&
-            this.filteredItems.filter((item) => this._getItemLabel(item) === this._inputElementValue)) ||
+            this.filteredItems.filter(
+              (item) => toLowerCase(this._getItemLabel(item)) === toLowerCase(this._inputElementValue)
+            )) ||
           [];
         if (
           this.allowCustomValue &&
@@ -691,7 +694,7 @@ export const ComboBoxMixin = (subclass) =>
             this._selectItemForValue(customValue);
             this.value = customValue;
           }
-        } else if (!this.allowCustomValue && !this.opened && itemsMatchedByLabel.length == 1) {
+        } else if (!this.allowCustomValue && !this.opened && itemsMatchedByLabel.length > 0) {
           this.value = this._getItemValue(itemsMatchedByLabel[0]);
         } else {
           this._inputElementValue = this.selectedItem ? this._getItemLabel(this.selectedItem) : this.value || '';

diff --git a/test/lazy-loading.test.js b/test/lazy-loading.test.js
@@ -895,8 +895,9 @@ describe('lazy loading', () => {
           comboBox.autoOpenDisabled = false;
           expect(comboBox.autoOpenDisabled).to.be.false;
 
-          comboBox._inputElementValue = 'item 12';
-          comboBox.filter = 'item 12';
+          const filterValue = 'item 12';
+          comboBox._inputElementValue = filterValue;
+          comboBox.filter = filterValue;
           expect(comboBox.opened).to.be.false;
           expect(comboBox.hasAttribute('focused')).to.be.false;
           expect(comboBox.value).to.equal('item 12');
@@ -906,8 +907,44 @@ describe('lazy loading', () => {
           comboBox.autoOpenDisabled = true;
           expect(comboBox.autoOpenDisabled).to.be.true;
 
-          comboBox._inputElementValue = 'item 12';
-          comboBox.filter = 'item 12';
+          const filterValue = 'item 12';
+          comboBox._inputElementValue = filterValue;
+          comboBox.filter = filterValue;
+          expect(comboBox.opened).to.be.false;
+          expect(comboBox.hasAttribute('focused')).to.be.false;
+          expect(comboBox.value).to.equal('item 12');
+        });
+
+        it('should set value without auto-open-disabled even if case does not match', () => {
+          comboBox.autoOpenDisabled = false;
+          expect(comboBox.autoOpenDisabled).to.be.false;
+
+          const filterValue = 'ItEm 12';
+          comboBox._inputElementValue = filterValue;
+          comboBox.filter = filterValue;
+          expect(comboBox.opened).to.be.false;
+          expect(comboBox.hasAttribute('focused')).to.be.false;
+          expect(comboBox.value).to.equal('item 12');
+        });
+
+        it('should set value with auto-open-disabled even if case does not match', () => {
+          comboBox.autoOpenDisabled = true;
+          expect(comboBox.autoOpenDisabled).to.be.true;
+
+          const filterValue = 'iTem 12';
+          comboBox._inputElementValue = filterValue;
+          comboBox.filter = filterValue;
+          expect(comboBox.opened).to.be.false;
+          expect(comboBox.hasAttribute('focused')).to.be.false;
+          expect(comboBox.value).to.equal('item 12');
+        });
+
+        it('should set first value of multiple matches that differ only in case', () => {
+          returnedItems = ['item 12', 'IteM 12'];
+
+          const filterValue = 'IteM 12';
+          comboBox._inputElementValue = filterValue;
+          comboBox.filter = filterValue;
           expect(comboBox.opened).to.be.false;
           expect(comboBox.hasAttribute('focused')).to.be.false;
           expect(comboBox.value).to.equal('item 12');
@@ -927,8 +964,9 @@ describe('lazy loading', () => {
           expect(comboBox.value).to.equal('other value');
 
           returnedItems = ['item 12'];
-          comboBox._inputElementValue = 'item 1';
-          comboBox.filter = 'item 1';
+          const filterValue = 'item 1';
+          comboBox._inputElementValue = filterValue;
+          comboBox.filter = filterValue;
           expect(comboBox.opened).to.be.false;
           expect(comboBox.hasAttribute('focused')).to.be.false;
           expect(comboBox.value).to.equal('other value');