Bug: Unable to change month and first click isn't registered when directive uses formControlName for Angular 15

[mwgriffiths88]

I'm using Angular 15, and I have a control that looks like this:

<form [formGroup]="form">
  <input
    formControlName="datetime"
    [dpDayPicker]="config"
    mode="daytime"
    theme="dp-material dp-main" />
</form>

There are two symptoms (seems to be across all browsers):

• The first click is never made when the picker opens for the first time.
• Unable to change the month.

https://stackblitz.com/edit/angular-ivy-fayr91?file=src/app/hello.component.ts

[agrahari-himanshu]

I was checking this issue and i found something strange

When we first declare the value and return it from the same getter, it works

https://stackblitz.com/edit/angular-ivy-cbn2yw?file=src/app/hello.component.ts

Although i could not able to debug the reason behind this

[vlio20]

I hope to have a look into it this weekend

[agrahari-himanshu]

When we return it from a function (It doesn't work as expected)

@Component({
  selector: 'hello',
  template: `
    <form [formGroup]="form">
      <input
        formControlName="datetime"
        [dpDayPicker]="config()"
        mode="daytime"
        theme="dp-material dp-main" />
    </form>`,
  styles: [`h1 { font-family: Lato; }`],
})
export class HelloComponent implements OnInit {
  form!: FormGroup;

  config(): IDatePickerDirectiveConfig {
    return {
      minutesInterval: 5,
      firstDayOfWeek: 'mo',
      format: 'DD-MM-YYYY H:mm',
    };;
  }

  ngOnInit(): void {
    this.form = new FormGroup({
      datetime: new FormControl(null),
    });
  }
}

When we have an object created already, and we just have to return (it works)

  private _config: IDatePickerDirectiveConfig = {
    minutesInterval: 5,
    firstDayOfWeek: 'mo',
    format: 'DD-MM-YYYY H:mm',
  };

  config(): IDatePickerDirectiveConfig {
    return this._config;
  }

[agrahari-himanshu]

I assume there is some kind of horse condition here [creating object ref and then return vs just returning the ref for already created object]