How do I solve this ionic InAppBrowser's weird behavior?

Question

I encounterd weird situation with my ionic InAppBrowser's behavior.

My code looks like this:

I have observable where I want a race between timeout duration and my http request

    const src$ = of(this.setItemLoading(item.id, true));
    const queryTimeout$ = timer(5e3).pipe(
        take(1),
        map(() => {
            return throwError(new Error('Timeout!!!'));
        })
    );

    src$.pipe(
        switchMap(() => race(queryTimeout$, http$)),
        delay(1e3),
        first(),
        tap(() => this.setItemLoading(item.id, false))
    ).subscribe(
        res => {
            item['afterQueryCallback'] && item['afterQueryCallback'](res);
        },
        err => {
            this.hpService.handleError(err);
        }
    );

Inside afterQueryCallback (which is in another component) I have this.iab.create(data, this.type, 'location=no'); where this.type is '_system' or '_blank' depends on using device or browser.

This works fine on Chrome and FF, however on Safari, my InAppBrowser throw alert which say "Native: InAppBrowser is not installed or you are running on a browser. Falling back to window.open.", and my app doesn't open anything, which makes sense cause Safari block window.open

But if inside the afterQueryCallback, I put this.iab.create(data, this.type, 'location=no'); in the callback of an alert popup (AlertController which is async/await fn), then it does open new tab again even it still has that alert quote. Is this because somehow AlertController could trigger window.open() ?

Can someone explains why and How can I pull off this on Safari without alert popup?

tested env: safari browser (both on macos and devices), app ios