fix: datepicker disabled state change is unstable

angular/projects/catalyst-demo/src/app/app.component.html

@@ -25,11 +25,26 @@ <h2>Form Components</h2>
     [connector]="countryConnector"
     [clearable]="true"
   ></cat-select>
+  <!--  Datepicker Section 1 -->
+  <cat-checkbox #checkBox
+                label="Should disable next datepicker">
+  </cat-checkbox>
+  <cat-datepicker
+    [disabled]="checkBox.checked"
+    label="Datepicker"
+    [nativeAttributes]="{ 'data-test': 'test-attribute' }"
+    hint="Depends on [disabled] attribute"
+  ></cat-datepicker>
+  <!--  Datepicker Section 2 -->
+  <cat-checkbox (catChange)="onCheckboxChange($event)"
+                formControlName="datepickerDisabled"
+                label="Should disable next datepicker">
+  </cat-checkbox>
   <cat-datepicker
     label="Datepicker"
     formControlName="date"
     [nativeAttributes]="{ 'data-test': 'test-attribute' }"
-    hint="this is a hint"
+    hint="Depends on formControl state"
   ></cat-datepicker>
   <formly-form [form]="form" [fields]="fields"></formly-form>
 </form>

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) {

core/src/components/cat-datepicker/cat-datepicker.tsx

@@ -199,7 +199,10 @@ export class CatDatepickerFlat {
     // has been updated.
     this.pickr?.destroy();
     this.pickr = undefined;
-    setTimeout(() => (this.pickr = this.initDatepicker(this.input)));
+    setTimeout(() => {
+      this.input ? (this.input.disabled = this.disabled) : null;
+      this.pickr = this.initDatepicker(this.input);
+    });
   }
 
   componentDidLoad() {
@@ -297,7 +300,7 @@ export class CatDatepickerFlat {
   }
 
   private initDatepicker(input?: HTMLInputElement): flatpickr.Instance | undefined {
-    if (this.disabled || this.readonly || !input) {
+    if (!input) {
       return;
     }