Merge pull request #7044 from IgniteUI/ibarakov/fix-6594-8.2.x

fix(grid): fix date filtering and chip commit #6594

Author: kdinev

projects/igniteui-angular/src/lib/grids/filtering/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/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

@@ -2667,37 +2667,6 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             expect(dropdownList).toBeNull();
         }));
 
-        it('Should commit the input and new chip after picking date from calendar for filtering.', fakeAsync(() => {
-            // Click date filter chip to show filter row.
-            const filterCells = fix.debugElement.queryAll(By.directive(IgxGridFilteringCellComponent));
-            const dateFilterCell = filterCells.find((fc) => fc.componentInstance.column.field === 'ReleaseDate');
-            const dateFilterCellChip = dateFilterCell.query(By.directive(IgxChipComponent));
-            dateFilterCellChip.nativeElement.click();
-            tick(100);
-            fix.detectChanges();
-
-            // Click input to open calendar.
-            const filteringRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent));
-            const input = filteringRow.query(By.directive(IgxInputDirective));
-            input.nativeElement.click();
-            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(100);
-            fix.detectChanges();
-
-            // Verify the chip and input are committed.
-            const activeFiltersArea = filteringRow.query(By.css('.igx-grid__filtering-row-main'));
-            const activeFilterChip = activeFiltersArea.query(By.directive(IgxChipComponent));
-            expect((<IgxChipComponent>activeFilterChip.componentInstance).selected).toBe(false, 'chip is not committed');
-            expect((<IgxInputDirective>input.componentInstance).value).toBeNull('input value is present and not committed');
-        }));
-
         it('Should correctly change resource strings for filter row.', fakeAsync(() => {
             fix = TestBed.createComponent(IgxGridFilteringComponent);
             grid = fix.componentInstance.grid;
@@ -3474,6 +3443,88 @@ 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');
+            clickHtmlElemAndBlur(todayDayItem, inputDebugElement);
+            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
+            clickHtmlElemAndBlur(chip, inputDebugElement);
+            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');
+            clickHtmlElemAndBlur(firstDayItem, inputDebugElement);
+            tick(100);
+            fix.detectChanges();
+
+            expect(chipDiv.classList.contains('igx-chip__item--selected')).toBe(true, 'chip is committed');
+
+            // Focus out
+            clickHtmlElemAndBlur(chip, inputDebugElement);
+            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(null, () => {
         let fix, grid;
@@ -6491,12 +6542,18 @@ function verifyChipVisibility(fix, index: number, shouldBeFullyVisible: boolean)
         .toBe(shouldBeFullyVisible, 'chip[' + index + '] visibility is incorrect');
 }
 
-function clickElemAndBlur(clickElem, blurElem) {
-    const elementRect = clickElem.nativeElement.getBoundingClientRect();
-    UIInteractions.simulatePointerEvent('pointerdown', clickElem.nativeElement, elementRect.left, elementRect.top);
+function clickElemAndBlur(clickElem: DebugElement, blurElem: DebugElement) {
+    const clickHtmlElem = clickElem.nativeElement;
+
+    clickHtmlElemAndBlur(clickHtmlElem, blurElem);
+}
+
+function clickHtmlElemAndBlur(clickElem: HTMLElement, blurElem: DebugElement) {
+    const elementRect = clickElem.getBoundingClientRect();
+    UIInteractions.simulatePointerEvent('pointerdown', clickElem, elementRect.left, elementRect.top);
     blurElem.nativeElement.blur();
-    (clickElem as DebugElement).nativeElement.focus();
+    clickElem.focus();
     blurElem.nativeElement.dispatchEvent(new FocusEvent('focusout', { bubbles: true }));
-    UIInteractions.simulatePointerEvent('pointerup', clickElem.nativeElement, elementRect.left, elementRect.top);
-    UIInteractions.simulateMouseEvent('click', clickElem.nativeElement, 10, 10);
+    UIInteractions.simulatePointerEvent('pointerup', clickElem, elementRect.left, elementRect.top);
+    UIInteractions.simulateMouseEvent('click', clickElem, 10, 10);
 }

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

@@ -912,10 +912,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 getFilterRowInputCommitIcon(fix) {