Datepicker extension to open picker on click or focus

[alfaproject]

I've been trying to create an extension that opens the datepicker picker when the input gets focused or gets clicked (either one is fine)

This is the best I got so far:

export const datepickerOpenedExtension: FormlyExtension = {
  onPopulate(field) {
    if (field.type !== 'datepicker') {
      return;
    }

    field.templateOptions!.click = (fld) => {
      fld.templateOptions!.datepickerOptions.opened = true;
    }
  },
};

But the picker doesn't open when the input gets clicked and instead opens when you click somewhere else but this error is thrown:

Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'

I've spent a few hours on this already trying to come up with a clean solution without having to duplicate the original datepicker type. I haven't found a lot of documentation on extensions but maybe I'm missing something obvious. Can I have some help?

P.S.: I'm trying with version 6.0.0-next.9 btw but got similar results with v5 too

[alfaproject]

@aitboudad I know you are busy but would you recommend any other way of accomplishing the same goal without cloning the custom type with the latest formly?

If not, I'll just clone or patch it for the time being.

[aitboudad]

the fix may need some time, in the meantime, use the following workaround::

click: (f) => {
  let element = document.getElementById(f.id);
  while (element.parentElement && !element.classList.contains('mat-form-field-wrapper')) {
    element = element.parentElement;
  }
  (element.querySelector('.mat-datepicker-toggle') as HTMLButtonElement).click();
},

[alfaproject]

Thank you for your suggestion. Based on it I came up with this version which I'll use for the time being:

focus: (_field, event: FocusEvent) => {
  let element = event.target as HTMLElement;
  let matDatepickerToggle: HTMLButtonElement | null;
  do {
    element = element.parentElement!;
    matDatepickerToggle = element.querySelector('.mat-datepicker-toggle');
  } while (matDatepickerToggle === null);
  matDatepickerToggle.click();
},

In the meanwhile I'll keep subscribed to this issue. Thank you!

[aitboudad]

This issue has been fixed and released as part of v6.0.0-beta.0 release.

Please let us know, in case you are still encountering a similar issue/problem.
Thank you!