Merge pull request #10467 from IgniteUI/bpenkov/simple-combo-clear

Lipata · web-flow · commit 30443f284c7e · 2021-11-11T14:11:12.000+02:00
Clear selection on blur when accessing non-existent item
diff --git a/projects/igniteui-angular/src/lib/combo/combo.common.ts b/projects/igniteui-angular/src/lib/combo/combo.common.ts
@@ -11,7 +11,6 @@ import { IgxSelectionAPIService } from '../core/selection';
 import { CancelableBrowserEventArgs, cloneArray, IBaseCancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils';
 import { SortingDirection } from '../data-operations/sorting-expression.interface';
 import { IForOfState, IgxForOfDirective } from '../directives/for-of/for_of.directive';
-import { ISelectionEventArgs } from '../drop-down/public_api';
 import { IgxIconService } from '../icon/public_api';
 import { IgxInputGroupType, IGX_INPUT_GROUP_TYPE } from '../input-group/inputGroupType';
 import { IgxInputDirective, IgxInputGroupComponent, IgxInputState } from '../input-group/public_api';
@@ -23,8 +22,7 @@ import {
     IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemDirective, IgxComboToggleIconDirective
 } from './combo.directives';
 import {
-    IComboFilteringOptions, IComboItemAdditionEvent, IComboSearchInputEventArgs,
-    IComboSelectionChangingEventArgs
+    IComboFilteringOptions, IComboItemAdditionEvent, IComboSearchInputEventArgs
 } from './public_api';
 
 export const IGX_COMBO_COMPONENT = new InjectionToken<IgxComboBase>('IgxComboComponentToken');
@@ -100,6 +98,22 @@ export enum IgxComboState {
 @Directive()
 export abstract class IgxComboBaseDirective extends DisplayDensityBase implements IgxComboBase, OnInit, DoCheck,
     AfterViewInit, OnDestroy, ControlValueAccessor {
+    /**
+     * Defines whether the caseSensitive icon should be shown in the search input
+     *
+     * ```typescript
+     * // get
+     * let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon;
+     * ```
+     *
+     * ```html
+     * <!--set-->
+     * <igx-combo [showSearchCaseIcon]='true'></igx-combo>
+     * ```
+     */
+    @Input()
+    public showSearchCaseIcon = false;
+
     /**
      * Set custom overlay settings that control how the combo's list of items is displayed.
      * Set:
@@ -414,17 +428,6 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
         this._type = val;
     }
 
-    /**
-     * Emitted when item selection is changing, before the selection completes
-     *
-     * ```html
-     * <igx-combo (selectionChanging)='handleSelection()'></igx-combo>
-     * ```
-     */
-    // TODO: any for old/new selection?
-    @Output()
-    public selectionChanging = new EventEmitter<IComboSelectionChangingEventArgs | ISelectionEventArgs>();
-
     /**
      * Emitted before the dropdown is opened
      *
@@ -865,6 +868,8 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
 
     public abstract dropdown: IgxComboDropDownComponent;
 
+    public abstract selectionChanging: EventEmitter<any>;
+
     constructor(
         protected elementRef: ElementRef,
         protected cdr: ChangeDetectorRef,
@@ -1125,6 +1130,11 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
         }
     }
 
+    /** @hidden @internal */
+    public toggleCaseSensitive() {
+        this.filteringOptions = { caseSensitive: !this.filteringOptions.caseSensitive };
+    }
+
     protected onStatusChanged = () => {
         if ((this.ngControl.control.touched || this.ngControl.control.dirty) &&
             (this.ngControl.control.validator || this.ngControl.control.asyncValidator)) {
diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts
@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import {
-    AfterViewInit, ChangeDetectorRef, Component, ElementRef, NgModule, OnInit, OnDestroy, Optional, Inject, Injector, ViewChild, Input
+    AfterViewInit, ChangeDetectorRef, Component, ElementRef, NgModule, OnInit, OnDestroy,
+    Optional, Inject, Injector, ViewChild, Input, Output, EventEmitter
 } from '@angular/core';
 import {
     IgxComboItemDirective,
@@ -18,7 +19,7 @@ import { IgxSelectionAPIService } from '../core/selection';
 import { IBaseEventArgs, IBaseCancelableEventArgs, CancelableEventArgs } from '../core/utils';
 import { IgxStringFilteringOperand, IgxBooleanFilteringOperand } from '../data-operations/filtering-condition';
 import { FilteringLogic } from '../data-operations/filtering-expression.interface';
-import { IgxForOfModule, IForOfState } from '../directives/for-of/for_of.directive';
+import { IgxForOfModule } from '../directives/for-of/for_of.directive';
 import { IgxIconModule, IgxIconService } from '../icon/public_api';
 import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { IgxToggleModule } from '../directives/toggle/toggle.directive';
@@ -114,22 +115,6 @@ const diffInSets = (set1: Set<any>, set2: Set<any>): any[] => {
 })
 export class IgxComboComponent extends IgxComboBaseDirective implements AfterViewInit, ControlValueAccessor, OnInit,
     OnDestroy, EditorProvider {
-    /**
-     * Defines whether the caseSensitive icon should be shown in the search input
-     *
-     * ```typescript
-     * // get
-     * let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon;
-     * ```
-     *
-     * ```html
-     * <!--set-->
-     * <igx-combo [showSearchCaseIcon]='true'></igx-combo>
-     * ```
-     */
-    @Input()
-    public showSearchCaseIcon = false;
-
     /**
      * An @Input property that controls whether the combo's search box
      * should be focused after the `opened` event is called
@@ -163,6 +148,16 @@ export class IgxComboComponent extends IgxComboBaseDirective implements AfterVie
     @Input()
     public searchPlaceholder = 'Enter a Search Term';
 
+    /**
+     * Emitted when item selection is changing, before the selection completes
+     *
+     * ```html
+     * <igx-combo (selectionChanging)='handleSelection()'></igx-combo>
+     * ```
+     */
+    @Output()
+    public selectionChanging = new EventEmitter<IComboSelectionChangingEventArgs>();
+
     /** @hidden @internal */
     @ViewChild(IgxComboDropDownComponent, { static: true })
     public dropdown: IgxComboDropDownComponent;
@@ -369,13 +364,6 @@ export class IgxComboComponent extends IgxComboBaseDirective implements AfterVie
         }
     }
 
-    /**
-     * @hidden @internal
-     */
-    public toggleCaseSensitive() {
-        this.filteringOptions = { caseSensitive: !this.filteringOptions.caseSensitive };
-    }
-
     /** @hidden @internal */
     public handleOpened() {
         this.triggerCheck();
diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.html b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.html
@@ -1,4 +1,4 @@
-<igx-input-group #inputGroup [displayDensity]="displayDensity" [type]="type">
+<igx-input-group #inputGroup [displayDensity]="displayDensity" [suppressInputAutofocus]="true" [type]="type">
     <ng-container ngProjectAs="[igxLabel]">
         <ng-content select="[igxLabel]"></ng-content>
     </ng-container>
@@ -10,9 +10,9 @@
     </ng-container>
 
     <input #comboInput igxInput [value]="value" (input)="handleInputChange($event)" (keyup)="handleKeyUp($event)"
-        (keydown)="handleKeyDown($event)" (blur)="onBlur()" [attr.placeholder]="placeholder"
-        aria-autocomplete="both" [attr.aria-owns]="dropdown.id" [attr.aria-labelledby]="ariaLabelledBy"
-        [disabled]="disabled" [igxTextSelection]="!composing" />
+        (keydown)="handleKeyDown($event)" (blur)="onBlur()" [attr.placeholder]="placeholder" aria-autocomplete="both"
+        [attr.aria-owns]="dropdown.id" [attr.aria-labelledby]="ariaLabelledBy" [disabled]="disabled"
+        [igxTextSelection]="!composing" />
 
     <ng-container ngProjectAs="igx-suffix">
         <ng-content select="igx-suffix"></ng-content>
@@ -26,6 +26,11 @@
             clear
         </igx-icon>
     </igx-suffix>
+    <igx-suffix *ngIf="showSearchCaseIcon">
+        <igx-icon family="imx-icons" name="case-sensitive" [active]="filteringOptions.caseSensitive"
+            (click)="toggleCaseSensitive()">
+        </igx-icon>
+    </igx-suffix>
     <igx-suffix class="igx-combo__toggle-button">
         <ng-container *ngIf="toggleIconTemplate">
             <ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: collapsed}"></ng-container>
@@ -43,8 +48,9 @@
     </ng-container>
     <div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'"
         [style.maxHeight.px]="itemsMaxHeight" [igxDropDownItemNavigation]="dropdown" (focus)="dropdown.onFocus()"
-        [tabindex]="dropdown.collapsed ? -1 : 0" role="listbox" [attr.id]="dropdown.id" (keydown)="handleItemKeyDown($event)">
-        <igx-combo-item role="option" [singleMode]="true" [itemHeight]='itemHeight' (click)="close()" *igxFor="let item of data
+        [tabindex]="dropdown.collapsed ? -1 : 0" role="listbox" [attr.id]="dropdown.id"
+        (keydown)="handleItemKeyDown($event)">
+        <igx-combo-item role="option" [singleMode]="true" [itemHeight]='itemHeight' (click)="handleItemClick()" *igxFor="let item of data
             | comboFiltering:filterValue:displayKey:filteringOptions:true
             | comboGrouping:groupKey:valueKey:groupSortingDirection;
             index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight"
@@ -68,7 +74,7 @@
             <ng-container *ngTemplateOutlet="emptyTemplate ? emptyTemplate : empty">
             </ng-container>
         </div>
-        <igx-combo-add-item [itemHeight]="itemHeight" *ngIf="isAddButtonVisible()"
+        <igx-combo-add-item #addItem [itemHeight]="itemHeight" *ngIf="isAddButtonVisible()"
             [tabindex]="dropdown.collapsed ? -1 : customValueFlag ? 1 : -1" class="igx-combo__add-item" role="button"
             aria-label="Add Item" [index]="virtualScrollContainer.igxForOf.length">
             <ng-container *ngTemplateOutlet="addItemTemplate ? addItemTemplate : addItemDefault">
diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts
@@ -31,6 +31,7 @@ const CSS_CLASS_INPUTGROUP_WRAPPER = 'igx-input-group__wrapper';
 const CSS_CLASS_INPUTGROUP_BUNDLE = 'igx-input-group__bundle';
 const CSS_CLASS_INPUTGROUP_MAINBUNDLE = 'igx-input-group__bundle-main';
 const CSS_CLASS_INPUTGROUP_BORDER = 'igx-input-group__border';
+const CSS_CLASS_ADDBUTTON = 'igx-combo__add-item';
 const CSS_CLASS_HEADER = 'header-class';
 const CSS_CLASS_FOOTER = 'footer-class';
 const defaultDropdownItemHeight = 40;
@@ -473,7 +474,7 @@ describe('IgxSimpleCombo', () => {
             tick();
             fixture.detectChanges();
             expect(combo.collapsed).toEqual(false);
-            expect(combo.open).toHaveBeenCalledTimes(2);
+            expect(combo.open).toHaveBeenCalledTimes(1);
 
             combo.handleKeyDown(UIInteractions.getKeyboardEvent('keydown', 'ArrowUp'));
             tick();
@@ -504,13 +505,48 @@ describe('IgxSimpleCombo', () => {
             expect(combo.closed.emit).not.toHaveBeenCalled();
             expect(combo.selection.length).toEqual(1);
         });
+
+        it('should clear the selection on tab/blur if the search text does not match any value', fakeAsync(() => {
+            // allowCustomValues does not matter
+            combo.select(combo.data[2][combo.valueKey]);
+            fixture.detectChanges();
+            expect(combo.selection.length).toBe(1);
+            expect(input.nativeElement.value).toEqual('Massachusetts');
+
+            UIInteractions.setInputElementValue(input.nativeElement, 'MassachusettsL');
+            fixture.detectChanges();
+            combo.onBlur();
+            tick();
+            fixture.detectChanges();
+            expect(input.nativeElement.value.length).toEqual(0);
+            expect(combo.selection.length).toEqual(0);
+        }));
+
+        it('should move the focus to the AddItem button with ArrowDown when allowCustomItems is true', fakeAsync(() => {
+            fixture.componentInstance.allowCustomValues = true;
+            fixture.detectChanges();
+            UIInteractions.setInputElementValue(input.nativeElement, 'MassachusettsL');
+            fixture.detectChanges();
+            combo.open();
+            fixture.detectChanges();
+            const addItemButton = fixture.debugElement.query(By.css(`.${CSS_CLASS_ADDBUTTON}`));
+            expect(addItemButton).toBeDefined();
+
+            input.nativeElement.focus();
+            fixture.detectChanges();
+
+            combo.onArrowDown(new Event('keydown'));
+            fixture.detectChanges();
+            expect(document.activeElement).toEqual(addItemButton.nativeElement);
+        }));
     });
 });
 
 @Component({
     template: `
 <igx-simple-combo #combo [placeholder]="'Location'" [data]='items' [displayDensity]="density"
-[valueKey]="'field'" [groupKey]="'region'" [width]="'400px'" (selectionChanging)="selectionChanging($event)">
+[valueKey]="'field'" [groupKey]="'region'" [width]="'400px'" (selectionChanging)="selectionChanging($event)"
+[allowCustomValues]="allowCustomValues">
 <ng-template igxComboItem let-display let-key="valueKey">
 <div class="state-card--simple">
 <span class="small-red-circle"></span>
@@ -531,6 +567,7 @@ class IgxSimpleComboSampleComponent {
     @ViewChild('combo', { read: IgxSimpleComboComponent, static: true })
     public combo: IgxSimpleComboComponent;
     public density: DisplayDensity = DisplayDensity.cosy;
+    public allowCustomValues = false;
 
     public items = [];
     public initData = [];
diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts
