Ionic-framework: bug: ToastController displaying an orange border box

[NickSklA]

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]

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

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

[therhenals]

This also affects AlertController window.

[liamdebeasi]

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/[email protected]

Ionic Angular
npm i @ionic/[email protected]

[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/[email protected]

Ionic Angular
npm i @ionic/[email protected]

Yep, fixed it for all controllers.

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/21226, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.