Merge branch 'master' into MKamenov/fix-mrl-pinning-background

Author: mpavlinov

projects/igniteui-angular/src/lib/carousel/carousel.component.ts

@@ -448,7 +448,6 @@ export class IgxCarouselComponent implements OnDestroy {
 
         this.onSlideChanged.emit({ carousel: this, slide });
         this._restartInterval();
-        requestAnimationFrame(() => this.nativeElement.focus());
     }
     /**
      *@hidden
@@ -482,13 +481,15 @@ export class IgxCarouselComponent implements OnDestroy {
     @HostListener('keydown.arrowright')
     public onKeydownArrowRight() {
         this.next();
+        requestAnimationFrame(() => this.nativeElement.focus());
     }
     /**
      *@hidden
      */
     @HostListener('keydown.arrowleft')
     public onKeydownArrowLeft() {
         this.prev();
+        requestAnimationFrame(() => this.nativeElement.focus());
     }
 }
 

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

@@ -484,6 +484,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
      */
     public onDateSelected(value: Date) {
         this.value = value;
+        this.commitInput();
     }
 
     /**

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

@@ -2494,6 +2494,37 @@ describe('IgxGrid - Filtering Row UI actions', () => {
             dropdownList = fix.debugElement.query(By.css('div.igx-drop-down__list.igx-toggle'));
             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');
+        }));
     });
 
     describe(null, () => {