Ngb-datepicker navigateTo also changes value

I copied the implementation of the NgbInputDatepicker from the docs.

<form class="row row-cols-sm-auto">
<div class="col-12">
<div class="input-group">
<input
class="form-control"
placeholder="yyyy-mm-dd"
name="dp"
[(ngModel)]="model"
[autoClose]="false"
ngbDatepicker
#d="ngbDatepicker" />
<button class="btn btn-outline-secondary bi bi-calendar3" (click)="d.toggle()" type="button">
Toggle calendar
</button>
<button class="btn btn-outline-secondary bi bi-calendar3" (click)="clearValue()" type="button">
Clear
</button>
</div>
</div>
</form>

<hr />
<pre>Model: {{ model | json }}</pre>


@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [CommonModule, NgbInputDatepicker, FormsModule],
selector: 'nl-test-datepicker',
standalone: true,
templateUrl: './test-datepicker.component.html'
})
export class TestDatepickerComponent {
model?: NgbDateStruct;

clearValue(): void {
this.model = undefined;
}
}


Normally when clicking on the forward/backward arrows from the navigation header, we should see the next/previous month but the current value shoul not change.

However when the autoclose property is set to [autoclose]="false" in order to handle the closing of the datepicker programmatically, there is the following bug: (steps to reproduce

1. open pop-up and select a date
2. without closing the pop-up, click on the clear button to clear the selected date
3. click on the forward button on the navigation
4. the next month is indeed rendered but we also get the value for the date we just cleared. I think this is an unexpected behavior since date selection and navigation are supposed to be 2 different things as per the documentation. Personally I would expect to see the next month but the date should still be set to undefined

Continue reading...