fix(filter-ui): Fix date filtering and chip commit #6594

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html

@@ -67,8 +67,9 @@
                        [value]="value | igxdate: filteringService.grid.locale"
                        [readonly]="true"
                        (keydown)="onInputKeyDown($event)"/>
-                <igx-suffix *ngIf="value" (keydown)="onClearKeyDown($event)" (click)="clearInput()" tabindex="0">
-                    <igx-icon>clear</igx-icon>
+                <igx-suffix *ngIf="value">
+                    <igx-icon (keydown)="onCommitKeyDown($event)" (click)="onCommitClick()" tabindex="0">done</igx-icon>
+                    <igx-icon (keydown)="onClearKeyDown($event)" (click)="clearInput()" tabindex="0">clear</igx-icon>
                 </igx-suffix>
             </igx-input-group>
             </ng-template>

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts

@@ -444,9 +444,11 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
         }
         requestAnimationFrame(() => {
             const focusedElement = document.activeElement;
-            if (focusedElement.className === 'igx-chip__remove') {
+
+            if (focusedElement.className === 'igx-chip__remove' || focusedElement.tagName === 'IGX-DAY-ITEM') {
                 return;
             }
+
             if (!(focusedElement && this.inputGroup.nativeElement.contains(focusedElement))
                 && this.dropDownConditions.collapsed) {
                 this.commitInput();
@@ -494,7 +496,6 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
      */
     public onDateSelected(value: Date) {
         this.value = value;
-        this.commitInput();
     }
 
     /**
@@ -543,11 +544,10 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
 
     public onChipClick(args, item: ExpressionUI) {
         if (this._cancelChipClick) {
+            this._cancelChipClick = false;
             return;
         }
 
-        this._cancelChipClick = false;
-
         this.expressionsList.forEach(ex => ex.isSelected = false);
 
         this.toggleChip(item);

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -1355,31 +1355,6 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             verifyFilterRowUI(input, close, reset);
         }));
 
-        it('Should commit the input and new chip after picking date from calendar for filtering.', fakeAsync(() => {
-            GridFunctions.clickFilterCellChip(fix, 'ReleaseDate');
-
-            // Click input to open calendar.
-            const filteringRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent));
-            const input = filteringRow.query(By.directive(IgxInputDirective));
-            input.triggerEventHandler('click', null);
-            tick(100);
-            fix.detectChanges();
-
-            // Click the today date.
-            const outlet = document.getElementsByClassName('igx-grid__outlet')[0];
-            const calendar = outlet.getElementsByClassName('igx-calendar')[0];
-            const todayDayItem = calendar.querySelector('.igx-calendar__date--current');
-            (<HTMLElement>todayDayItem).click();
-            tick(200);
-            fix.detectChanges();
-
-            // Verify the chip and input are committed.
-            const filterChip = filteringRow.query(By.directive(IgxChipComponent));
-            expect(filterChip).toBeTruthy();
-            expect(filterChip.componentInstance.selected).toBeFalsy();
-            expect(input.nativeElement.value).toEqual('');
-        }));
-
         it('Should navigate keyboard focus correctly between the filter row and the grid cells.', fakeAsync(() => {
             GridFunctions.clickFilterCellChip(fix, 'ProductName');
 
@@ -1986,6 +1961,94 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             const headerChip = GridFunctions.getFilterChipsForColumn('ProductName', fix);
             expect(headerChip.length).toBe(1);
         }));
+
+        it('Should commit the input and new chip after focus out and should edit chip without creating new one.', fakeAsync(() => {
+            // Click date filter chip to show filter row.
+            const dateFilterCellChip = GridFunctions.getFilterChipsForColumn('ReleaseDate', fix)[0];
+            dateFilterCellChip.nativeElement.click();
+            tick(100);
+            fix.detectChanges();
+
+            // Click input to open calendar.
+            const filteringRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent));
+            const inputDebugElement = filteringRow.query(By.directive(IgxInputDirective));
+            const input = inputDebugElement.nativeElement;
+            input.click();
+            tick(100);
+            fix.detectChanges();
+
+            // Click the today date.
+            const outlet = document.getElementsByClassName('igx-grid__outlet')[0];
+            let calendar = outlet.getElementsByClassName('igx-calendar')[0];
+            const todayDayItem: HTMLElement = calendar.querySelector('.igx-calendar__date--current');
+            todayDayItem.focus();
+            todayDayItem.click();
+            grid.filteringRow.onInputGroupFocusout();
+            tick(100);
+            fix.detectChanges();
+
+            // Verify the newly added chip is selected.
+            const chip = GridFunctions.getFilterConditionChip(fix, 0);
+            const chipDiv = chip.querySelector('.igx-chip__item');
+
+            expect(chipDiv.classList.contains('igx-chip__item--selected')).toBe(true, 'initial chip is committed');
+
+            // Focus out
+            grid.nativeElement.focus();
+            grid.filteringRow.onInputGroupFocusout();
+            tick(200);
+            fix.detectChanges();
+
+            expect(chipDiv.classList.contains('igx-chip__item--selected')).toBe(false, 'initial chip is not committed');
+            expect(input.value).toBe('', 'initial input value is present and not committed');
+
+            chip.click();
+            tick(200);
+            fix.detectChanges();
+
+            // Open calendar
+            input.click();
+            tick(100);
+            fix.detectChanges();
+
+            calendar = outlet.getElementsByClassName('igx-calendar')[0];
+
+            // View years
+            const yearView: HTMLElement = calendar.querySelectorAll('.igx-calendar-picker__date')[1] as HTMLElement;
+            yearView.click();
+            tick(100);
+            fix.detectChanges();
+
+            // Select the first year
+            const firstYear: HTMLElement = calendar.querySelectorAll('.igx-calendar__year')[0] as HTMLElement;
+            firstYear.click();
+            tick(100);
+            fix.detectChanges();
+
+            // Select the first day
+            const firstDayItem: HTMLElement = calendar.querySelector('.igx-calendar__date');
+            firstDayItem.focus();
+            firstDayItem.click();
+            grid.filteringRow.onInputGroupFocusout();
+            tick(100);
+            fix.detectChanges();
+
+            expect(chipDiv.classList.contains('igx-chip__item--selected')).toBe(true, 'chip is committed');
+
+            // Focus out
+            grid.nativeElement.focus();
+            grid.filteringRow.onInputGroupFocusout();
+            tick(200);
+            fix.detectChanges();
+            expect(chipDiv.classList.contains('igx-chip__item--selected')).toBe(false, 'chip is selected');
+
+            // Check if we still have only one committed chip
+            const chipsLength = GridFunctions.getAllFilterConditionChips(fix).length;
+
+            expect(chipsLength).toBe(1, 'there is more than one chip');
+            expect(chipDiv.classList.contains('igx-chip__item--selected')).toBe(false, 'chip is not committed');
+            expect(input.value).toBe('', 'input value is present and not committed');
+        }));
     });
 
     describe('Integration scenarios', () => {

projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts

@@ -1188,10 +1188,16 @@ export class GridFunctions {
     }
 
     public static getFilterConditionChip(fix, index) {
+        const conditionChips = this.getAllFilterConditionChips(fix);
+
+        return conditionChips[index];
+    }
+
+    public static getAllFilterConditionChips(fix) {
         const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
         const conditionChips = GridFunctions.sortNativeElementsHorizontally(
             filterUIRow.queryAll(By.directive(IgxChipComponent)).map((ch) => ch.nativeElement));
-        return conditionChips[index];
+        return conditionChips;
     }
 
     public static getFilterRowPrefix(fix): DebugElement {