feat(simple-combo): allow values to be selected on tab press - master (#14708)

Author: georgianastasov

CHANGELOG.md

@@ -4,6 +4,9 @@ All notable changes for each version of this project will be documented in this
 
 ## 18.2.0
 ### New Features
+- `IgxSimpleCombo`
+    - Introduced ability for Simple Combo to automatically select and retain valid input on "Tab" press enhancing user experience by streamlining data entry and reducing the need for manual selection improving form navigation.
+
 #### Scrollbar: New CSS variables
 
 We have introduced new CSS variables to allow for more customizable scrollbars. This enhancement utilizes the available WebKit pseudo-selectors such as `::-webkit-scrollbar-track`. However, please note that these pseudo-selectors are prefixed with `-webkit-` and are only supported in WebKit-based browsers (e.g., Chrome, Safari).

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

@@ -1425,20 +1425,54 @@ describe('IgxSimpleCombo', () => {
             expect(combo.close).toHaveBeenCalledTimes(1);
         });
 
-        it('should clear the input on blur with a partial match', () => {
-            spyOn(combo as any, 'clearSelection').and.callThrough();
+        it('should select first match item 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('connecticut', input);
+            fixture.detectChanges();
+
+            UIInteractions.triggerEventHandlerKeyDown('Tab', input);
+            fixture.detectChanges();
+
+            expect(combo.displayValue).toEqual('Connecticut');
+            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();
 
             input.triggerEventHandler('focus', {});
             fixture.detectChanges();
-            UIInteractions.simulateTyping('new', input);
+            UIInteractions.simulateTyping('mic', input);
 
             UIInteractions.triggerEventHandlerKeyDown('Tab', input);
             fixture.detectChanges();
 
-            expect((combo as any).clearSelection).toHaveBeenCalledOnceWith(true);
+            expect(combo.displayValue).toEqual('Michigan');
             expect(combo.dropdown.closing.emit).toHaveBeenCalledTimes(1);
-            expect(combo.displayValue).toEqual('');
         });
 
         it('should not clear the selection and input on blur with a match', () => {
@@ -1465,7 +1499,7 @@ describe('IgxSimpleCombo', () => {
             expect(combo.selection).toBeDefined()
         });
 
-        it('should clear input on blur when dropdown is collapsed with no match', () => {
+        it('should not clear input on blur when dropdown is collapsed with match', () => {
             input.triggerEventHandler('focus', {});
             fixture.detectChanges();
 
@@ -1478,8 +1512,8 @@ describe('IgxSimpleCombo', () => {
             UIInteractions.triggerEventHandlerKeyDown('Tab', input);
             fixture.detectChanges();
 
-            expect(combo.displayValue).toEqual('');
-            expect(combo.selection).not.toBeDefined()
+            expect(combo.displayValue).toEqual('New Jersey');
+            expect(combo.selection).toBeDefined()
         });
 
         it('should open the combo when input is focused', () => {
@@ -2765,7 +2799,7 @@ describe('IgxSimpleCombo', () => {
             const selectedItem = combo.data[combo.data.length - 1];
             expect(combo.displayValue).toEqual(`${selectedItem[combo.displayKey]}`);
         }));
-        it('should clear input on blur when bound to remote data and no item is selected', () => {
+        it('should not clear input on blur when bound to remote data and item is selected', () => {
             input.triggerEventHandler('focus', {});
             fixture.detectChanges();
 
@@ -2775,7 +2809,7 @@ describe('IgxSimpleCombo', () => {
             UIInteractions.triggerEventHandlerKeyDown('Tab', input);
             fixture.detectChanges();
 
-            expect(combo.comboInput.value).toEqual('');
+            expect(combo.comboInput.value).toEqual('Product 0');
         });
 
         it('should display correct value after the value has been changed from the form and then by the user', fakeAsync(() => {

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

@@ -361,8 +361,21 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
             this.clearSelection(true);
         }
         if (!this.collapsed && event.key === this.platformUtil.KEYMAP.TAB) {
-            this.clearOnBlur();
-            this.close();
+            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);
+                this.close();
+                this.textSelection.trigger();
+            } else {
+                this.clearOnBlur();
+                this.close();
+            }
         }
         this.composing = false;
         super.handleKeyDown(event);