fix(date-picker): properly set required, focus date if it's in valid range

Author: jackofdiamond5

projects/igniteui-angular/src/lib/date-picker/date-picker.component.html

@@ -7,9 +7,9 @@
         [igxDateTimeEditor]="this.inputFormat" [minValue]="this.minValue" [maxValue]="this.maxValue"
         [spinDelta]="this.spinDelta" [spinLoop]="this.spinLoop" [displayFormat]="this.displayFormat"
         [disabled]="this.disabled" [placeholder]="this.placeholder" [readonly]="!this.isDropdown"
-        [igxTextSelection]="this.isDropdown" [required]="this.required" [locale]="this.locale"
-        [attr.aria-expanded]="!this.collapsed" [attr.aria-labelledby]="this.label?.id"
-        [attr.aria-required]="this.required" aria-haspopup="dialog" aria-autocomplete="none" role="combobox">
+        [igxTextSelection]="this.isDropdown" [locale]="this.locale" [attr.aria-expanded]="!this.collapsed"
+        [attr.aria-labelledby]="this.label?.id" [attr.aria-required]="this.required" aria-haspopup="dialog"
+        aria-autocomplete="none" role="combobox">
 
     <igx-suffix *ngIf="!this.clearComponents.length && this.value" (click)="this.clear()">
         <igx-icon>clear</igx-icon>

projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts

@@ -752,6 +752,8 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
                 }
             });
 
+        this.setRequired();
+
         if (this._ngControl) {
             this._statusChanges$ =
                 this._ngControl.statusChanges.subscribe(this.onStatusChanged.bind(this));
@@ -816,6 +818,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
         if (this.inputGroup.isRequired !== this.required) {
             this.inputGroup.isRequired = this.required;
         }
+        this.setRequired();
     };
 
     private handleSelection(date: Date): void {
@@ -862,7 +865,10 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
 
         this._overlayService.onOpened.pipe(...this._overlaySubFilter).subscribe((eventArgs) => {
             this.opened.emit(eventArgs as IBaseEventArgs);
-            this._calendar?.daysView?.focusActiveDate();
+            const errors = DateTimeUtil.validateMinMax(this.value, this.minValue, this.maxValue);
+            if (Object.keys(errors).length === 0) {
+                this._calendar?.daysView?.focusActiveDate();
+            }
         });
 
         this._overlayService.onClosing.pipe(...this._overlaySubFilter).subscribe((eventArgs) => {
@@ -904,6 +910,16 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
         }
     }
 
+    private setRequired(): void {
+        // workaround for igxInput setting required
+        Promise.resolve().then(() => {
+            const isRequired = this.required;
+            if (this.inputGroup && this.inputGroup.isRequired !== isRequired) {
+                this.inputGroup.isRequired = isRequired;
+            }
+        });
+    }
+
     private _initializeCalendarContainer(componentInstance: IgxCalendarContainerComponent) {
         this._calendar = componentInstance.calendar;
         const isVertical = this.headerOrientation === PickerHeaderOrientation.Vertical;