fix: Make server-side filtering case-insensitive

Fixes: vaadin/flow-components#915
vaadin · May 10, 2021 · b1500a4 · b1500a4
1 parent f88fa4c
commit b1500a4
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 2 deletions.
diff --git a/src/vaadin-combo-box-mixin.html b/src/vaadin-combo-box-mixin.html
@@ -687,8 +687,9 @@
           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
           // to prevent a repetitive input value being saved after pressing ESC and Tab.
@@ -701,7 +702,7 @@
             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.html b/test/lazy-loading.html
@@ -925,6 +925,38 @@
               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;
+
+              comboBox._inputElementValue = 'ItEm 12';
+              comboBox.filter = 'item 12';
+              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;
+
+              comboBox._inputElementValue = 'iTem 12';
+              comboBox.filter = 'item 12';
+              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 multiple matches that differ only in case', () => {
+              returnedItems = ['item 12', 'IteM 12'];
+
+              comboBox._inputElementValue = 'IteM 12';
+              comboBox.filter = 'IteM 12';
+              expect(comboBox.opened).to.be.false;
+              expect(comboBox.hasAttribute('focused')).to.be.false;
+              expect(comboBox.value).to.equal('item 12');
+            });
+
             it('should keep empty value if it is not an exact match', () => {
               comboBox._inputElementValue = 'item';
               comboBox.filter = 'item';