From 7d3103cb240ea01a7f6b2923251b79e9144933a8 Mon Sep 17 00:00:00 2001 From: Kanstantsin Malikau Date: Mon, 26 Feb 2024 14:36:51 +0100 Subject: [PATCH 1/3] fix: datepicker disabled state change is unstable --- .../catalyst-demo/src/app/app.component.html | 17 ++++++++++++++- .../catalyst-demo/src/app/app.component.ts | 17 ++++++++++++++- .../cat-datepicker/cat-datepicker.tsx | 21 ++++++++++++------- 3 files changed, 45 insertions(+), 10 deletions(-) diff --git a/angular/projects/catalyst-demo/src/app/app.component.html b/angular/projects/catalyst-demo/src/app/app.component.html index 09b8c419..d3aaf221 100644 --- a/angular/projects/catalyst-demo/src/app/app.component.html +++ b/angular/projects/catalyst-demo/src/app/app.component.html @@ -25,11 +25,26 @@

Form Components

[connector]="countryConnector" [clearable]="true" > + + + + + + + diff --git a/angular/projects/catalyst-demo/src/app/app.component.ts b/angular/projects/catalyst-demo/src/app/app.component.ts index 8d395ed5..0067fed9 100644 --- a/angular/projects/catalyst-demo/src/app/app.component.ts +++ b/angular/projects/catalyst-demo/src/app/app.component.ts @@ -28,7 +28,8 @@ export class AppComponent implements OnInit { test: new FormControl('test', [Validators.pattern('a+'), Validators.required, Validators.minLength(3)]), relatedInput: new FormControl(null, [this.equalTo('test')]), option: new FormControl(null, [Validators.required]), - date: new FormControl(null, [Validators.required]) + date: new FormControl(null, [Validators.required]), + datepickerDisabled: new FormControl(true) }); countryConnector = countryConnector; @@ -148,6 +149,20 @@ export class AppComponent implements OnInit { this.form.controls.test.valueChanges.subscribe(() => { this.form.controls.relatedInput.updateValueAndValidity(); }); + if (this.form.controls.datepickerDisabled.value) { + this.form.controls.date.disable(); + } else { + this.form.controls.date.enable(); + } + } + + onCheckboxChange(event: Event) { + const checkbox = event.target as HTMLInputElement; + if (checkbox.checked) { + this.form.controls.date.disable(); + } else { + this.form.controls.date.enable(); + } } equalTo(controlName: string) { diff --git a/core/src/components/cat-datepicker/cat-datepicker.tsx b/core/src/components/cat-datepicker/cat-datepicker.tsx index b72e11c8..94a34234 100644 --- a/core/src/components/cat-datepicker/cat-datepicker.tsx +++ b/core/src/components/cat-datepicker/cat-datepicker.tsx @@ -192,14 +192,19 @@ export class CatDatepickerFlat { } @Watch('disabled') + onDisabledChanged(value: boolean) { + this.pickr?.set('clickOpens', !value && !this.readonly); + if (this.pickr?.altInput) { + this.pickr.altInput.disabled = value; + } + } + @Watch('readonly') - onDisabledChanged() { - // Dynamically changing 'disabled' value is not working due to a bug in the - // library. We thus need to fully recreate the date picker after the value - // has been updated. - this.pickr?.destroy(); - this.pickr = undefined; - setTimeout(() => (this.pickr = this.initDatepicker(this.input))); + onReadonlyChanged(value: boolean) { + this.pickr?.set('clickOpens', !value && !this.disabled); + if (this.pickr?.altInput) { + this.pickr.altInput.readOnly = value; + } } componentDidLoad() { @@ -297,7 +302,7 @@ export class CatDatepickerFlat { } private initDatepicker(input?: HTMLInputElement): flatpickr.Instance | undefined { - if (this.disabled || this.readonly || !input) { + if (!input) { return; } From 9f9c14d6b009167a3a7a8a7c1f8fb6c8b64db84f Mon Sep 17 00:00:00 2001 From: Kanstantsin Malikau Date: Tue, 27 Feb 2024 08:09:01 +0100 Subject: [PATCH 2/3] fix: datepicker disabled state change is unstable --- .../cat-datepicker/cat-datepicker.tsx | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/core/src/components/cat-datepicker/cat-datepicker.tsx b/core/src/components/cat-datepicker/cat-datepicker.tsx index 94a34234..2722f38e 100644 --- a/core/src/components/cat-datepicker/cat-datepicker.tsx +++ b/core/src/components/cat-datepicker/cat-datepicker.tsx @@ -192,19 +192,17 @@ export class CatDatepickerFlat { } @Watch('disabled') - onDisabledChanged(value: boolean) { - this.pickr?.set('clickOpens', !value && !this.readonly); - if (this.pickr?.altInput) { - this.pickr.altInput.disabled = value; - } - } - @Watch('readonly') - onReadonlyChanged(value: boolean) { - this.pickr?.set('clickOpens', !value && !this.disabled); - if (this.pickr?.altInput) { - this.pickr.altInput.readOnly = value; - } + onDisabledChanged() { + // Dynamically changing 'disabled' value is not working due to a bug in the + // library. We thus need to fully recreate the date picker after the value + // has been updated. + this.pickr?.destroy(); + this.pickr = undefined; + setTimeout(() => { + this.input ? this.input.disabled = this.disabled : null + this.pickr = this.initDatepicker(this.input); + }); } componentDidLoad() { From c3025da5388256d043e6fbdea731a18234610548 Mon Sep 17 00:00:00 2001 From: Kanstantsin Malikau Date: Tue, 27 Feb 2024 08:30:45 +0100 Subject: [PATCH 3/3] fix: datepicker disabled state change is unstable --- core/src/components/cat-datepicker/cat-datepicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/cat-datepicker/cat-datepicker.tsx b/core/src/components/cat-datepicker/cat-datepicker.tsx index 2722f38e..642b4c11 100644 --- a/core/src/components/cat-datepicker/cat-datepicker.tsx +++ b/core/src/components/cat-datepicker/cat-datepicker.tsx @@ -200,7 +200,7 @@ export class CatDatepickerFlat { this.pickr?.destroy(); this.pickr = undefined; setTimeout(() => { - this.input ? this.input.disabled = this.disabled : null + this.input ? (this.input.disabled = this.disabled) : null; this.pickr = this.initDatepicker(this.input); }); }