Prime NG calendar closing when the soft keyboard opens

Question

I am working in an Angular 10 app. When using a tablet, opening a p-calendar primeng component opens the soft keyboard, triggering a window resize event. p-calendar closes itself on a window resize event, making the calendar unusable for a user on tablet. Is there a workaround for this?

We are required to have the keyboard open so preventing it from opening isn't an option.

Link to p-calendar documentation. https://www.primefaces.org/primeng/v11/#/calendar

Answer 1

As a workaround, I did the following. Please note that this example is for a shared p-calendar component:

A. On mobile browsers, turn on touchUI. This would acquire the available space to show the calendar.

mobileMode: boolean = false;

ngOnInit(): void {
    let ua = navigator.userAgent;
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i.test(ua)) {
       this.mobileMode = true;
    }
}

B.To manually pop up the soft keyboard, I bind this function to (onShow):

@ViewChild('calendar', { static: false }) calendar: Calendar;

focus(event: AnimationEvent) {
  setTimeout(() => {
    this.calendar.el.nativeElement.querySelector('input').focus();;
  }, 0);
}

Template:

<p-calendar #calendar
            [touchUI]="mobileMode"
            (onShow)="focus($event)">
</p-calendar>