How to show ngx-bootstrap datepicker when manually triggering focus on input?

Question

I want to implement some logic when datepicker looses focus => so (blur) but! when i want to select some date from said picker it'll trigger the logic -> closing the datepicker and not registering any value change. My approach is (onHidden) since it's not triggered when i use the datepicker but when i click outside, but it only fires when the datepicker is shown.

How can I achieve to show the datepicker when i manually set the input field to focus? Since there are no available services and/or directive types where i can trigger .show().

Stackblitz semi related example:

@Edit: modified stackblitz to fit my issue better.

Stackblitz

Answer 1

You can use the click() method available in the nativeElement to trigger the DatePicker. Try it, it works.

Edit : With a little bit of timeout you can wait until the element becomes visible to trigger the click event.

 toggleEditMode() {
    this.editing = !this.editing;
    setTimeout(() => {
       if(this.picker) {
         this.picker.nativeElement.focus();
         this.picker.nativeElement.click();
       }
    },100)
  }