Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Res42 opened this issue Jan 9, 2025 · 2 comments
Open
Labels
area: datetimepicker Issues about datetimepicker question Further information is requested

Comments

@Res42
Copy link

Res42 commented Jan 9, 2025

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

@nzbin nzbin added question Further information is requested area: datetimepicker Issues about datetimepicker labels Jan 10, 2025
@nzbin
Copy link
Member

nzbin commented Jan 18, 2025

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.

switch (this._datetimepicker.type) {

@Res42
Copy link
Author

Res42 commented Jan 20, 2025

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: datetimepicker Issues about datetimepicker question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants