feat(simple-combo): prevent non-existent item selection on Tab key

Author: georgianastasov

Diff for: projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts

@@ -1442,6 +1442,24 @@ describe('IgxSimpleCombo', () => {
             expect(combo.comboInput.value).toEqual('Connecticut');
         });
 
+        it('should not select any item if input does not match data on tab key pressed', () => {
+            input.triggerEventHandler('focus', {});
+            fixture.detectChanges();
+
+            const toggleButton = fixture.debugElement.query(By.css('.' + CSS_CLASS_TOGGLEBUTTON));
+            toggleButton.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
+            fixture.detectChanges();
+
+            UIInteractions.simulateTyping('nonexistent', input);
+            fixture.detectChanges();
+
+            UIInteractions.triggerEventHandlerKeyDown('Tab', input);
+            fixture.detectChanges();
+
+            expect(combo.displayValue).toEqual('');
+            expect(combo.comboInput.value).toEqual('');
+        });
+
         it('should not clear the input on blur with a partial match but it should select the match item', () => {
             spyOn(combo.dropdown.closing, 'emit').and.callThrough();
 

Diff for: projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts

@@ -361,6 +361,12 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
             this.clearSelection(true);
         }
         if (!this.collapsed && event.key === this.platformUtil.KEYMAP.TAB) {
+            const filtered = this.filteredData.find(this.findAllMatches);
+            if (filtered === null || filtered === undefined) {
+                this.clearOnBlur();
+                this.close();
+                return;
+            }
             const focusedItem = this.dropdown.focusedItem;
             if (focusedItem && !focusedItem.isHeader) {
                 this.select(focusedItem.itemID);