bug(datepicker): regression with #3371

[terencehonles]

Bug description:

I'm opening this as it's own issue so it doesn't get lost. The issue #3317 and its associated PR #3371 caused what probably should be considered a regression. The scenario is with the following code:

<input #picker ngbDatepicker (focus)="picker.open()" />

you will never be able to close the datepicker because closing it will call focus which will then in turn open it.

This was also reported by @chumbalum and @zm3d3ni who provided the stackblitz https://stackblitz.com/edit/angular-phaczz as a more complete example of what should continue to work.

There are some comments on #3317 and suggestions for a possible solution.

[maxokorokov]

Thanks for opening the dedicated issue for this.

In this case I'm sorry for breaking your code, but the default behaviour should be refocusing previously focused element, so the focus won't get lost by default (other components like dropdown work this way in both bootstrap and ng-bootstrap). And we've decided to not rollback this change.

We just couldn't foresee all use cases of how people open datepicker. And we're not very fond of doing it on focus, because what's the point of having an <input> at the first place...

As a workaround I could suggest you doing this (quick, but not very beautiful):

https://stackblitz.com/edit/angular-vxjijx?file=src/app/app.component.html

<!-- Better create a `shouldStayClosed = false;` in the component, not the template though. Just for illustrative purposes -->
<input #d="ngbDatepicker"
    (click)="d.open()"
    (focus)="!d['_shouldStayClosed'] && d.open(); d['_shouldStayClosed'] = d.isOpen()"
>

---

But I agree that in 5.2.0 we should add something like [refocus]="false" to fix this in a better way. So I'll keep this open.

[benouat]

I would suggest a cleaner workaround than Max' one 😄

dontOpen = false;
  
closeDatepicker(datepicker) {
  this.dontOpen = true;
  datepicker.close();
  setTimeout(() => {
    this.dontOpen = false;
  }, 100); // <-- fine tune this
}

<input #datepicker="ngbDatepicker"
  class="form-control"
  formControlName="date"
  ngbDatepicker
  (click)="datepicker.open()"
  (focus)="!dontOpen && datepicker.open()"
  (dateSelect)="closeDatepicker()"
  (closed)="closeDatepicker();"
  placeholder="yyyy-mm-dd">

[maxokorokov]

@benouat You probably missed the comment line in my example →

<!-- Better create a `shouldStayClosed = false;` in the component, not the template though. Just for illustrative purposes -->

You don't need any timeouts here, just the dontOpen = false will do instead of d['_shouldStayClosed']. So :

https://stackblitz.com/edit/angular-mgtynf?file=src/app/app.component.html

dontClose = false;

<input #d="ngbDatepicker"
    (click)="d.open()"
    (focus)="!dontClose && d.open(); dontClose = d.isOpen()"
>