extensions icon indicating copy to clipboard operation
extensions copied to clipboard

[Datetimepicker] Cannot read properties of undefined (reading 'type')

Open Res42 opened this issue 1 year ago • 2 comments

The datetimepicker throws an error after updating to 19.0.1, but only when I programmatically set its value with writeValue. This did not throw when I was on version 18.4.0.

ERROR TypeError: Cannot read properties of undefined (reading 'type')
    at _MtxDatetimepickerInput.getDisplayFormat (mtxDatetimepicker.mjs:4490:34)
    at _MtxDatetimepickerInput._formatValue (mtxDatetimepicker.mjs:4529:89)
    at set value (mtxDatetimepicker.mjs:4370:10)
    at _MtxDatetimepickerInput.writeValue (mtxDatetimepicker.mjs:4443:10)
    at Object.next (form-field.ts:46:21)
    at ConsumerObserver2.next (Subscriber.js:90:25)
    at Subscriber2._next (Subscriber.js:59:22)
    at Subscriber2.next (Subscriber.js:32:12)
    at Subject.js:41:22
    at errorContext (errorContext.js:23:5)

I made a minimal repro here: https://stackblitz.com/edit/stackblitz-starters-5yuruzkt?file=src%2Fmain.ts (check the console for the error).

Res42 avatar Jan 09 '25 15:01 Res42

I test extensions v18 in Angular v19, it still has the same issue, maybe the effect() has some changes. https://stackblitz.com/edit/stackblitz-starters-mxo8qdem?file=src%2Fmain.ts,package.json

The datetimepicker is undefined when you invoke writeValue, I don't know how to fix it. Another way you can use setTimeout.

https://github.com/ng-matero/extensions/blob/52b50da8d0bf318ab49148d30161683826b8bb82/projects/extensions/datetimepicker/datetimepicker-input.ts#L320

nzbin avatar Jan 18 '25 02:01 nzbin

I made a workaround for it, but it is a bit hacky:

valueAccessor = viewChild.required(MtxDatetimepickerInput);
datepickerPopup = viewChild.required(MtxDatetimepicker);

constructor() {
  effect(() => {
    const valueAccessor = this.valueAccessor();
    const datepickerPopup = this.datepickerPopup();
  
    // Manually set the `_datetimepicker` so the `getDisplayFormat` function runs properly.
    // Do not use the `mtxDatetimepicker` input because it will throw an error when the input is set from the HTML too.
    valueAccessor._datetimepicker ??= datepickerPopup;
  
    untracked(() => {
      if (valueAccessor) {
        valueAccessor.writeValue(new Date());
      }
    });
  });
}

https://stackblitz.com/edit/stackblitz-starters-vfjkxuvs?file=src%2Fmain.ts

Res42 avatar Jan 20 '25 08:01 Res42