fix(calendar): ngModel doesn't update with updateOn: 'blur' set (#14172)

* fix(calendar): ngModel doesn't update with updateOn: 'blur' set

* demos(calendar): update sample

Author: simeonoff

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

@@ -530,6 +530,7 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
 
         this.showActiveDay = false;
         this.monthViews.forEach(view => view.clearPreviewRange());
+        this._onTouchedCallback();
     }
 
     private handleArrowKeydown(event: KeyboardEvent, delta: number) {

projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts

@@ -350,7 +350,10 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective {
             });
         }
 
-        this.el.nativeElement.focus();
+        if (this.tabIndex !== -1) {
+            this.el.nativeElement.focus();
+        }
+
         this.activeDate = item.date.native;
         this.selectActiveDate();
     }

src/app/calendar/calendar.sample.html

@@ -17,6 +17,8 @@
                 [weekStart]="getWeekDayNumber(weekStart)"
                 [headerOrientation]="headerOrientation"
                 [orientation]="orientation"
+                [(ngModel)]="date"
+                [ngModelOptions]="{updateOn: 'blur'}"
             >
             </igx-calendar>
         </div>
@@ -168,7 +170,15 @@
         </div>
 
         <small>Active date</small>
-        <span>{{calendar.activeDate.toLocaleDateString()}}</span>
+        <span>{{calendar.activeDate | date }}</span>
+
+        <small>Selected date(s)</small>
+
+        <ol class="selected-dates" [class.multiple]="selection.length > 1">
+            @for (item of selection; track item) {
+                <li>{{item | date }}</li>
+            }
+        </ol>
 
         <div class="preview__info">
             <a

src/app/calendar/calendar.sample.scss

@@ -122,3 +122,13 @@ igx-date-range-picker {
 .gap {
     gap: 1rem;
 }
+
+.selected-dates {
+    margin: 0;
+    padding-inline: 1rem;
+
+    &:not(.multiple) {
+        padding: 0;
+        list-style: none;
+    }
+}

src/app/calendar/calendar.sample.ts

@@ -4,7 +4,7 @@ import {
     CUSTOM_ELEMENTS_SCHEMA,
     ChangeDetectionStrategy,
 } from "@angular/core";
-import { NgFor } from "@angular/common";
+import { NgFor, DatePipe, DATE_PIPE_DEFAULT_OPTIONS } from "@angular/common";
 import { FormsModule } from "@angular/forms";
 import {
     DateRangeType,
@@ -65,6 +65,12 @@ defineComponents(IgcCalendarComponent);
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
     standalone: true,
     changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: DATE_PIPE_DEFAULT_OPTIONS,
+            useValue: { dateFormat: 'longDate', }
+        }
+    ],
     imports: [
         IgxButtonDirective,
         IgxRippleDirective,
@@ -80,6 +86,7 @@ defineComponents(IgcCalendarComponent);
         IgxSwitchComponent,
         IgxIconComponent,
         NgFor,
+        DatePipe
     ],
 })
 export class CalendarSampleComponent {
@@ -93,6 +100,8 @@ export class CalendarSampleComponent {
         year: "numeric",
     };
 
+    protected date = new Date();
+
     private _today = new Date();
     private _locale: string;
     private _selectionType: ISelectionType;
@@ -296,4 +305,12 @@ export class CalendarSampleComponent {
     protected getWeekDayNumber(value: WeekDays | string) {
         return DaysMap[value];
     }
+
+    protected get selection(): Date[] {
+        if (Array.isArray(this.date)) {
+            return this.date;
+        }
+
+        return [this.date];
+    }
 }