fix(combo): trim selected text #12782 (#12791)

Author: Lipata

projects/igniteui-angular/src/lib/combo/combo.common.ts

@@ -1300,7 +1300,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
     protected findMatch = (element: any): boolean => {
         const value = this.displayKey ? element[this.displayKey] : element;
         const searchValue = this.searchValue || this.comboInput?.value;
-        return value?.toString().toLowerCase() === searchValue.trim().toLowerCase();
+        return value?.toString().trim().toLowerCase() === searchValue.trim().toLowerCase();
     };
 
     protected manageRequiredAsterisk(): void {

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

@@ -2101,6 +2101,38 @@ describe('igxCombo', () => {
                 expect(combo.selection).toEqual([]);
                 expect(combo.value).toBe('');
             });
+            it('should select values that have spaces as prefixes/suffixes', fakeAsync(() => {
+                combo.displayKey = combo.valueKey = 'value';
+                combo.data = [
+                    { value: "Mississippi " }
+                ];
+                const dropdown = combo.dropdown;
+
+                dropdown.toggle();
+                tick();
+                fixture.detectChanges();
+                const dropdownContent = fixture.debugElement.query(By.css(`.${CSS_CLASS_CONTENT}`));
+
+                UIInteractions.simulateTyping('Mississippi ', input);
+                // combo.searchValue = 'My New Custom Item';
+                // combo.handleInputChange();
+                fixture.detectChanges();
+
+                combo.handleKeyUp(UIInteractions.getKeyboardEvent('keyup', 'ArrowDown'));
+                fixture.detectChanges();
+                tick();
+                fixture.detectChanges();
+                UIInteractions.triggerEventHandlerKeyDown('Space', dropdownContent);
+                tick();
+                fixture.detectChanges();
+                combo.toggle();
+                tick();
+                fixture.detectChanges();
+                combo.onBlur();
+                tick();
+                fixture.detectChanges();
+                expect(combo.value).toBe('Mississippi ');
+            }));
             it('should prevent selection when selectionChanging is cancelled', () => {
                 spyOn(combo.selectionChanging, 'emit').and.callFake((event: IComboSelectionChangingEventArgs) => event.cancel = true);
                 combo.toggle();

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

@@ -1454,6 +1454,28 @@ describe('IgxSimpleCombo', () => {
             fixture.detectChanges();
             expect(combo.collapsed).toEqual(true);
         }));
+
+        it('should select values that have spaces as prefixes/suffixes', fakeAsync(() => {
+            fixture.detectChanges();
+
+            dropdown.toggle();
+            fixture.detectChanges();
+
+            UIInteractions.simulateTyping('Ohio ', input);
+            fixture.detectChanges();
+
+            UIInteractions.triggerKeyDownEvtUponElem('Enter', input.nativeElement);
+            fixture.detectChanges();
+
+            combo.toggle();
+            tick();
+            fixture.detectChanges();
+
+            combo.onBlur();
+            tick();
+            fixture.detectChanges();
+            expect(combo.value).toBe('Ohio ');
+        }));
     });
 
     describe('Display density', () => {
@@ -2020,7 +2042,7 @@ class IgxSimpleComboSampleComponent {
             'New England 01': ['Connecticut', 'Maine', 'Massachusetts'],
             'New England 02': ['New Hampshire', 'Rhode Island', 'Vermont'],
             'Mid-Atlantic': ['New Jersey', 'New York', 'Pennsylvania'],
-            'East North Central 02': ['Michigan', 'Ohio', 'Wisconsin'],
+            'East North Central 02': ['Michigan', 'Ohio ', 'Wisconsin'],
             'East North Central 01': ['Illinois', 'Indiana'],
             'West North Central 01': ['Missouri', 'Nebraska', 'North Dakota', 'South Dakota'],
             'West North Central 02': ['Iowa', 'Kansas', 'Minnesota'],
@@ -2269,7 +2291,7 @@ export class IgxSimpleComboBindingDataAfterInitComponent implements AfterViewIni
 @Component({
     template: `
         <div style="display: flex; flex-direction: column; height: 100%; justify-content: flex-end;">
-            <igx-simple-combo #combo [data]="items" [displayKey]="'field'" [valueKey]="'field'" [width]="'100%'" 
+            <igx-simple-combo #combo [data]="items" [displayKey]="'field'" [valueKey]="'field'" [width]="'100%'"
             style="margin-bottom: 60px;">
             </igx-simple-combo>
         </div>`

src/app/combo/combo.sample.ts

@@ -333,7 +333,7 @@ export class ComboSampleComponent implements OnInit, AfterViewInit {
         if ('added' in evt) {
             this.hasSelection = !!evt?.newSelection.length;
             return;
-        } 
+        }
 
         if (!evt.newSelection) {
             this.simpleComboOpenOnClear.open();