fix(date-picker): prevent disabled calendar selections

CHANGELOG.md

@@ -68,6 +68,8 @@ All notable changes for each version of this project will be documented in this
 
 ### Bug Fixes
 
+- `IgxDatePickerComponent`, `IgxDateRangePickerComponent`
+    - An open calendar no longer accepts date selections while the picker is disabled.
 - **Forms**
     - `IgxSnackbarComponent` - The default action button now renders with `type="button"`. Previously, when the snackbar was inside a `form` (for example as part of a grid), it became the default button of the form, so pressing Enter in any input of the form clicked it, which triggered the snackbar action and submitted the form.
     - `IgxQueryBuilderComponent` - The add expression and the group (AND/OR) buttons now render with `type="button"`. Previously, clicking them inside a `form` submitted it. Pressing Enter in the query builder inputs also no longer submits a surrounding `form`.

projects/igniteui-angular/date-picker/src/date-picker/README.md

@@ -123,7 +123,7 @@ The date picker also supports binding through `ngModel` if two-way date-bind is
 | `locale` | Locale settings used in `displayFormat` and for localizing the calendar.  | string |
 | `overlaySettings` | Changes the default overlay settings used by the `IgxDatePickerComponent`. | OverlaySettings |
 | `placeholder` | Sets the placeholder text for empty input. | string |
-| `disabled` | Disables or enables the picker. | boolean |
+| `disabled` | Disables or enables the picker, including date selection in an open calendar. | boolean |
 | `outlet` | **Deprecated.** The container used for the pop up element. | IgxOverlayOutletDirective \| ElementRef |
 | `type` | Determines how the picker will be styled. | IgxInputGroupType |
 | `spinLoop` | Determines if the currently spun date segment should loop over. | boolean |

projects/igniteui-angular/date-picker/src/date-picker/calendar-container/calendar-container.component.html

@@ -25,6 +25,7 @@
                 <button
                     #todayButton
                     type="button"
+                    [disabled]="isDisabled()"
                     igxButton="flat"
                     igxRipple
                     (click)="todaySelection.emit({ owner: this })"
@@ -36,9 +37,10 @@
     }
 </ng-template>
 
-<igx-calendar></igx-calendar>
+<igx-calendar [inert]="isDisabled()"></igx-calendar>
  @if( usePredefinedRanges || (customRanges?.length || 0) > 0 ){
         <igx-predefined-ranges-area
+            [inert]="isDisabled()"
             [usePredefinedRanges]="usePredefinedRanges"
             [customRanges]="customRanges"
             [resourceStrings]="resourceStrings"

projects/igniteui-angular/date-picker/src/date-picker/calendar-container/calendar-container.component.ts

@@ -73,6 +73,7 @@ export class IgxCalendarContainerComponent {
         return this.mode === PickerInteractionMode.Dialog;
     }
 
+    public isDisabled = () => false;
     public usePredefinedRanges = false;
     public customRanges: CustomDateRange[] = [];
     public resourceStrings!: IDateRangePickerResourceStrings;

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

@@ -832,6 +832,23 @@ describe('IgxDatePicker', () => {
                 vi.useRealTimers();
             });
 
+            it('should prevent interaction with an open calendar while disabled', async () => {
+                datePicker.open();
+                await vi.runAllTimersAsync();
+                detectChanges();
+                const calendar = document.querySelector<HTMLElement>('igx-calendar')!;
+
+                expect(calendar.inert).toBeFalsy();
+
+                datePicker.setDisabledState(true);
+                detectChanges();
+                expect(calendar.inert).toBeTruthy();
+
+                datePicker.setDisabledState(false);
+                detectChanges();
+                expect(calendar.inert).toBeFalsy();
+            });
+
             it('should activate today\'s date when reopening the calendar', async () => {
                 datePicker.clear();
                 datePicker.open();

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

@@ -957,6 +957,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
     }
 
     private _initializeCalendarContainer(componentInstance: IgxCalendarContainerComponent) {
+        componentInstance.isDisabled = () => this.disabled;
         this._calendar = componentInstance.calendar;
         this._calendar.hasHeader = !this.isDropdown && !this.hideHeader;
         this._calendar.formatOptions = this.pickerCalendarFormat;

projects/igniteui-angular/date-picker/src/date-range-picker/README.md

@@ -108,6 +108,7 @@ With projected inputs:
 ### Inputs
 | Name             | Type               | Description |
 |:-----------------|:-------------------|:------------|
+| disabled         | boolean            | Disables the picker, including date selection in an open calendar. |
 | doneButtonText   | string             | Changes the default text of the `done` button. It will show up only in `dialog` mode. Default value is `Done`. |
 | displayMonthsCount | number             | Sets the number displayed month views. Default is `2`. |
 | formatter        | function => string | Applies a custom formatter function on the selected or passed date. |

projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.spec.ts

@@ -510,6 +510,23 @@ describe('IgxDateRangePicker', () => {
             });
 
             describe('Properties & events tests', () => {
+                it('should prevent interaction with an open calendar while disabled', async () => {
+                    dateRange.open();
+                    await vi.runAllTimersAsync();
+                    detectChanges();
+                    const calendarElement = document.querySelector<HTMLElement>('igx-calendar')!;
+
+                    expect(calendarElement.inert).toBeFalsy();
+
+                    dateRange.setDisabledState(true);
+                    detectChanges();
+                    expect(calendarElement.inert).toBeTruthy();
+
+                    dateRange.setDisabledState(false);
+                    detectChanges();
+                    expect(calendarElement.inert).toBeFalsy();
+                });
+
                 it('should display placeholder', () => {
                     detectChanges();
                     expect(singleInputElement.nativeElement.placeholder).toEqual('MM/dd/yyyy - MM/dd/yyyy');

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

@@ -1344,6 +1344,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     }
 
     private _initializeCalendarContainer(componentInstance: IgxCalendarContainerComponent) {
+        componentInstance.isDisabled = () => this.disabled;
         this._calendar = componentInstance.calendar;
         this._calendar.hasHeader = !this.isDropdown && !this.hideHeader;
         this._calendar.locale = this.locale;