Fixed date picker's searchVal binding in ESF custom date dialog. (#16689)

Author: gedinakova

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html

@@ -22,7 +22,7 @@
 @if (column.dataType === 'date') {
     <igx-date-picker #picker
         [weekStart]="column.pipeArgs.weekStart ?? weekStart"
-        [(value)]="searchVal"
+        [(ngModel)]="searchVal"
         [locale]="grid.locale"
         [outlet]="grid.outlet"
         (click)="picker.open()"

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

@@ -51,12 +51,13 @@ import { GridSelectionMode, FilterMode, Size } from '../common/enums';
 import { ControlsFunction } from '../../test-utils/controls-functions.spec';
 import { FilteringStrategy, FormattedValuesFilteringStrategy } from '../../data-operations/filtering-strategy';
 import { IgxInputGroupComponent } from '../../input-group/public_api';
-import { formatDate, getComponentSize } from '../../core/utils';
+import { getComponentSize } from '../../core/utils';
 import { IgxCalendarComponent } from '../../calendar/calendar.component';
 import { GridResourceStringsEN } from '../../core/i18n/grid-resources';
 import { setElementSize } from '../../test-utils/helper-utils.spec';
 import { IgxDateTimeEditorDirective } from '../../directives/date-time-editor/date-time-editor.directive';
 import { IgxTimePickerComponent } from '../../time-picker/time-picker.component';
+import { HelperTestFunctions } from '../../test-utils/calendar-helper-utils';
 
 const DEBOUNCE_TIME = 30;
 const FILTER_UI_ROW = 'igx-grid-filtering-row';
@@ -5054,6 +5055,62 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             expect(grid.filteredData.length).toEqual(1);
         }));
 
+        it('Should properly scroll to prev/next period in custom date filter dialog.', fakeAsync(() => {
+            // Open excel style custom filtering dialog.
+            GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
+            tick(100);
+            fix.detectChanges();
+            GridFunctions.clickExcelFilterCascadeButton(fix);
+            fix.detectChanges();
+
+            GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
+            tick(200);
+
+            const expr = GridFunctions.getExcelCustomFilteringDateExpressions(fix)[0];
+            const datePicker = expr.querySelector('igx-date-picker');
+            const input = datePicker.querySelector('input');
+            UIInteractions.simulateClickEvent(input);
+            fix.detectChanges();
+
+            // Click today item.
+            const calendar = document.querySelector('igx-calendar');
+            const todayItem = calendar.querySelector('.igx-days-view__date--current');
+            UIInteractions.simulateClickAndSelectEvent(todayItem.firstChild);
+            tick(100);
+            fix.detectChanges();
+            flush();
+
+            // Reopen calender and click previous month button.
+            UIInteractions.simulateClickEvent(input);
+            fix.detectChanges();
+
+            const prevMonthButton = fix.debugElement.queryAll(
+                                By.css(HelperTestFunctions.CALENDAR_PREV_BUTTON_CSSCLASS),
+                            )[0].nativeElement;
+            prevMonthButton.focus();
+            UIInteractions.simulateMouseEvent(
+                "mousedown",
+                prevMonthButton,
+                0,
+                0,
+            );
+            tick();
+            UIInteractions.simulateMouseEvent(
+                "mouseup",
+                prevMonthButton,
+                0,
+                0,
+            );
+            fix.detectChanges();
+
+            // Verify the calendar is scrolled to previous month.
+            const headerLabel = document.querySelector('igx-calendar').querySelector('.igx-calendar-picker__date') as HTMLElement;
+            const today = new Date();
+            const prevMonth = new Date(today.setMonth(today.getMonth() - 1));
+            const monthName = prevMonth.toLocaleString('default', { month: 'short' });
+            expect(headerLabel.innerText.trim()).toMatch(`${monthName}`);
+        }));
+
         it('Should take pipeArgs weekStart property as calendar\'s default.', fakeAsync(() => {
             const column = grid.getColumnByName('ReleaseDate');