bug: ToastController displaying an orange border box

Bug Report

Ionic version:

[x] 5.1.0

Current behavior:

An orange border box appears when I present a toast message. Disappears when I tap anywhere else but the toast and appears again when I tap it.

Expected behavior:

Not displaying anything like this when presenting a toast message or tap it.

Steps to reproduce:

The easiest way to reproduce is to copy the “presentToast()” function below and call it. When the toast appears you should see an orange border box around the app and when you tap anywhere else it should disappear. (Use a dark theme might help you notice it)

Related code:

import { Component } from '@angular/core';
import { ToastController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(
    private toastCtrl: ToastController
  ) {
    this.presentToast('Hello World!');
  }

  async presentToast(msg: string, dur = 150000) {
    const toast = await this.toastCtrl.create({
      message: msg,
      duration: dur
    });
    await toast.present();
  }
}

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.7.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.1.0
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.0.1
   @capacitor/core : 2.0.1

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.16.1 (/usr/local/bin/node)
   npm    : 6.13.4
   OS     : macOS Catalina

[ErgerSusha]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

Ionic React npm i @ionic/react@5.2.0-dev.202005062021.179d971

Ionic Angular npm i @ionic/angular@5.2.0-dev.202005062021.179d971

Yep, fixed it for all controllers.

[ErgerSusha]

This also affects LoadingController window. As a temporary workaround adding this to globals.scss seems to help:

ion-modal, ion-loading {
  outline: none;
}