fix(time-picker): prevent disabled popup commits

CHANGELOG.md

@@ -68,6 +68,8 @@ All notable changes for each version of this project will be documented in this
 
 ### Bug Fixes
 
+- `IgxTimePickerComponent`
+    - An open time picker no longer commits a time while 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/time-picker/README.md

@@ -79,7 +79,7 @@ The component's action buttons can be templated using the `igxPickerActions` dir
 | `cancelButtonLabel` | string | Renders cancel button with custom content, which closes the dropdown/dialog and reverts picker's value to the value at the moment of opening. By default `cancelButtonLabel` is set to 'Cancel'. |
 | `value` | `Date | string` | Value of the time picker. |
 |`resourceStrings`| ITimePickerResourceStrings | Resource strings of the time-picker. |
-| `disabled` | boolean | Disable the time picker. |
+| `disabled` | boolean | Disable the time picker. An open picker cannot change the time while disabled. |
 | `itemsDelta`| object | Sets the delta for hour, minute and second items. By default `itemsDelta` is set to {hour:1, minute:1, second:1} |
 | `minValue` | `Date | string` | The minimum value required for the picker to remain valid. |
 | `maxValue` | `Date | string` | The maximum value required for the editor to remain valid. |

projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.html

@@ -51,7 +51,7 @@
                 </button>
             }
             @if (okButtonLabel) {
-                <button type="button" igxButton="flat" (click)="okButtonClick()">
+                <button type="button" igxButton="flat" [disabled]="disabled" (click)="okButtonClick()">
                     {{okButtonLabel}}
                 </button>
             }
@@ -73,7 +73,7 @@ <h2 class="igx-time-picker__header-hour" data-no-typography>
                 </h2>
             </div>
         }
-        <div class="igx-time-picker__body">
+        <div class="igx-time-picker__body" [inert]="disabled">
             @if (showHoursList) {
                 <div #hourList [igxItemList]="'hourList'">
                     @for (hour of selectedDate | timeItemPipe:'hour':minDropdownValue:maxDropdownValue:appliedFormat:spinLoop; track hour+$index) {

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

@@ -1990,6 +1990,28 @@ describe('IgxTimePicker', () => {
                 expect(timePicker.valueChange.emit).not.toHaveBeenCalled();
             });
 
+            it('should discard a pending time when the open dialog is disabled', async () => {
+                timePicker.mode = 'dialog';
+                fixture.detectChanges();
+                timePicker.open();
+                await fixture.whenStable();
+                fixture.detectChanges();
+                const initialValue = timePicker.value;
+                const change = vi.spyOn(timePicker.valueChange, 'emit');
+                timePicker.nextHour(1);
+
+                timePicker.setDisabledState(true);
+                fixture.detectChanges();
+                const panel = fixture.debugElement.query(By.css('.igx-time-picker__body'));
+                expect(panel.nativeElement.inert).toBe(true);
+
+                timePicker.okButtonClick();
+                timePicker.close();
+                await fixture.whenStable();
+                expect(timePicker.value).toEqual(initialValue);
+                expect(change).not.toHaveBeenCalled();
+            });
+
             it('should close the dropdown when cleared while open', async () => {
                 timePicker.open();
                 await fixture.whenStable();

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

@@ -863,6 +863,10 @@ export class IgxTimePickerComponent extends PickerBaseDirective
 
     /** @hidden @internal */
     public okButtonClick(): void {
+        if (this.disabled) {
+            return;
+        }
+
         this.updateValue(this._selectedDate);
         this.close();
     }
@@ -1254,7 +1258,10 @@ export class IgxTimePickerComponent extends PickerBaseDirective
                     return;
                 }
                 const value = this.parseToDate(this.value);
-                if ((this.dateTimeEditor.value as Date)?.getTime() !== value?.getTime()) {
+                if (this.disabled) {
+                    this.setSelectedValue(this._dateValue);
+                    this.dateTimeEditor.value = value;
+                } else if ((this.dateTimeEditor.value as Date)?.getTime() !== value?.getTime()) {
                     this.updateValue(this._selectedDate);
                 }
                 // Do not focus the input if clicking outside in dropdown mode