From 8d16cc02a332f62ab850881952b25943ae73fa1a Mon Sep 17 00:00:00 2001 From: Aristeu Monteiro da Rocha Junior Date: Tue, 2 Jan 2024 13:49:28 -0300 Subject: [PATCH 1/5] issue453: fix issue where hours and minutes fields are not updated when "enableKeyboardInput" is set to true --- CHANGELOG.md | 7 +++++++ package.json | 2 +- .../ngx-material-timepicker-dial-control.component.ts | 6 ++++++ 3 files changed, 14 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 00f5b34..b879d17 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,13 @@ All notable changes to this project will be documented in this file +## 13.1.2 (2024-01-02) + +### Fixes + +* fix(ngx-material-timepicker-component): fix issue where hours and minutes fields are not updated when "enableKeyboardInput" is set to true, + fixes [(#453)](https://github.com/Agranom/ngx-material-timepicker/issues/453) + ## 13.1.1 (2023-07-11) ### Fixes diff --git a/package.json b/package.json index fa6d820..c19b83e 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ngx-material-timepicker", "description": "Handy material design timepicker for angular", - "version": "13.1.1", + "version": "13.1.2", "license": "MIT", "author": "Vitalii Boiko ", "keywords": [ diff --git a/src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.ts b/src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.ts index 181302a..ba8dbf7 100755 --- a/src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.ts +++ b/src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.ts @@ -63,6 +63,12 @@ export class NgxMaterialTimepickerDialControlComponent implements OnInit { } + ngOnChanges() { + if (this.timeControl) { + this.timeControl.setValue(this.formatTimeForUI(this.time)); + } + } + saveTimeAndChangeTimeUnit(event: FocusEvent, unit: TimeUnit): void { event.preventDefault(); this.previousTime = this.time; From 8f89c50cf5927996e26ea67a1e3d82e8ea267eaa Mon Sep 17 00:00:00 2001 From: Aristeu Monteiro da Rocha Junior Date: Tue, 2 Jan 2024 14:02:41 -0300 Subject: [PATCH 2/5] issue453: fix issue where hours and minutes fields are not updated when enableKeyboardInput is set to true - fix ngOnChanges usage --- .../ngx-material-timepicker-dial-control.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.ts b/src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.ts index ba8dbf7..bb7b39b 100755 --- a/src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.ts +++ b/src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.ts @@ -1,5 +1,5 @@ /* tslint:disable:triple-equals */ -import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'; +import { Component, ElementRef, EventEmitter, Input, OnInit, OnChanges, Output, ViewChild } from '@angular/core'; import { FormControl } from '@angular/forms'; import { debounceTime, distinctUntilChanged, filter, tap } from 'rxjs/operators'; import { ClockFaceTime } from '../../models/clock-face-time.interface'; @@ -14,7 +14,7 @@ import { isDigit } from '../../utils/timepicker.utils'; styleUrls: ['ngx-material-timepicker-dial-control.component.scss'], providers: [TimeParserPipe, TimeLocalizerPipe], }) -export class NgxMaterialTimepickerDialControlComponent implements OnInit { +export class NgxMaterialTimepickerDialControlComponent implements OnInit, OnChanges { previousTime: number | string; From 7c0983ea0e4643edf8c61bad686af6dfe1ea3d91 Mon Sep 17 00:00:00 2001 From: Aristeu Monteiro da Rocha Junior Date: Tue, 2 Jan 2024 14:25:31 -0300 Subject: [PATCH 3/5] issue453: fix issue where hours and minutes fields are not updated when enableKeyboardInput is set to true - increase test coverage --- ...gx-material-timepicker-dial-control.component.spec.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.spec.ts b/src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.spec.ts index cafab7b..9ab6fc1 100755 --- a/src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.spec.ts +++ b/src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.spec.ts @@ -151,11 +151,20 @@ describe('NgxMaterialTimepickerDialControlComponent', () => { it('should set value to form control', () => { component.time = '10'; component.ngOnInit(); + component.ngOnChanges(); const timeControl = component.timeControl; expect(timeControl.value).toBe('10'); expect(timeControl.enabled).toBeTruthy(); }); + it('should not set value to form control if form control is not available yet', () => { + const ngOnChangesSpy = spyOn(component, 'ngOnChanges'); + component.time = '10'; + const timeControl = component.timeControl; + expect(timeControl).toBe(undefined); + expect(ngOnChangesSpy).not.toHaveBeenCalled(); + }); + it('should disable form control', () => { component.disabled = true; component.ngOnInit(); From 7be5a73af9c66dfb1f33c71f2f44bf9916392be5 Mon Sep 17 00:00:00 2001 From: Aristeu Monteiro da Rocha Junior Date: Tue, 2 Jan 2024 14:51:46 -0300 Subject: [PATCH 4/5] issue453: fix issue where hours and minutes fields are not updated when enableKeyboardInput is set to true - fix random failures of unit tests --- .../ngx-material-timepicker-dial-control.component.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.spec.ts b/src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.spec.ts index 9ab6fc1..27001bf 100755 --- a/src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.spec.ts +++ b/src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.spec.ts @@ -28,6 +28,7 @@ describe('NgxMaterialTimepickerDialControlComponent', () => { }).createComponent(NgxMaterialTimepickerDialControlComponent); component = fixture.componentInstance; + component.timeList = []; }); it('should set current time to previous time, change time unit and emit focus event', waitForAsync(() => { From c86079c2ee9b439999df584e10ca129e52ed861b Mon Sep 17 00:00:00 2001 From: Aristeu Monteiro da Rocha Junior Date: Wed, 3 Jan 2024 10:58:25 -0300 Subject: [PATCH 5/5] issue453: fix - adjust unit test for correct coverage --- .../ngx-material-timepicker-dial-control.component.spec.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.spec.ts b/src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.spec.ts index 27001bf..d42c78b 100755 --- a/src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.spec.ts +++ b/src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.spec.ts @@ -159,11 +159,10 @@ describe('NgxMaterialTimepickerDialControlComponent', () => { }); it('should not set value to form control if form control is not available yet', () => { - const ngOnChangesSpy = spyOn(component, 'ngOnChanges'); component.time = '10'; + component.ngOnChanges(); const timeControl = component.timeControl; expect(timeControl).toBe(undefined); - expect(ngOnChangesSpy).not.toHaveBeenCalled(); }); it('should disable form control', () => {