diff --git a/CHANGELOG.md b/CHANGELOG.md index bf83fc33a69..c2c7a201837 100644 --- a/CHANGELOG.md +++ b/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`. diff --git a/projects/igniteui-angular/time-picker/README.md b/projects/igniteui-angular/time-picker/README.md index 2f545d10274..acc7fc27726 100644 --- a/projects/igniteui-angular/time-picker/README.md +++ b/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. | diff --git a/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.html b/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.html index 9265142b070..033f5c50a3d 100644 --- a/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.html +++ b/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.html @@ -51,7 +51,7 @@ } @if (okButtonLabel) { - } @@ -73,7 +73,7 @@

} -
+
@if (showHoursList) {
@for (hour of selectedDate | timeItemPipe:'hour':minDropdownValue:maxDropdownValue:appliedFormat:spinLoop; track hour+$index) { diff --git a/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.spec.ts b/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.spec.ts index 2e72d7fbee5..c9a37415236 100644 --- a/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.spec.ts +++ b/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(); diff --git a/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts b/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts index 43b0b197010..24db83fd944 100644 --- a/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts +++ b/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