Error clicking the date picker when toast is not dismissed

Ionic Framework ionic-v3
1

When I click the date picker normally there is no error. But when I show toast and click date picker before toast is dismissed I get this error. I have tested it on browser only. If toast is dismissed and then if I click the date picker it is fine.

EXCEPTION: Error in ./PickerColumnCmp class PickerColumnCmp - inline template:0:215
browser_adapter.js:77 EXCEPTION: Error in ./PickerColumnCmp class PickerColumnCmp - inline template:0:215BrowserDomAdapter.logError @ browser_adapter.js:77BrowserDomAdapter.logGroup @ browser_adapter.js:87ExceptionHandler.call @ exception_handler.js:57(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:112onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
browser_adapter.js:77 ORIGINAL EXCEPTION: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '[object Object]'BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:66(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:112onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
browser_adapter.js:77 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:69(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:112onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
browser_adapter.js:77 Error: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '[object Object]'
    at ExpressionChangedAfterItHasBeenCheckedException.BaseException [as constructor] (exceptions.js:17)
    at new ExpressionChangedAfterItHasBeenCheckedException (exceptions.js:44)
    at checkBinding (view_utils.js:126)
    at DebugAppView._View_PickerColumnCmp2.detectChangesInternal (PickerColumnCmp.template.js:213)
    at DebugAppView.AppView.detectChanges (view.js:200)
    at DebugAppView.detectChanges (view.js:289)
    at DebugAppView.AppView.detectContentChildrenChanges (view.js:215)
    at DebugAppView._View_PickerColumnCmp0.detectChangesInternal (PickerColumnCmp.template.js:90)
    at DebugAppView.AppView.detectChanges (view.js:200)
    at DebugAppView.detectChanges (view.js:289)BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:70(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:112onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
browser_adapter.js:77 ERROR CONTEXT:BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:73(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:112onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
browser_adapter.js:77 DebugContext {_view: _View_PickerColumnCmp2, _nodeIndex: 0, _tplRow: 0, _tplCol: 215}BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:74(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:112onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
zone.js:463 ViewWrappedException {_wrapperMessage: "Error in ./PickerColumnCmp class PickerColumnCmp - inline template:0:215", _originalException: ExpressionChangedAfterItHasBeenCheckedException, _originalStack: "Error: Expression has changed after it was checked…//localhost:8100/build/js/app.bundle.js:26080:44)", _context: DebugContext, _wrapperStack: "Error: Error in ./PickerColumnCmp class PickerColu…ngesInternal (PickerDisplayCmp.template.js:317:8)"}consoleError @ zone.js:463drainMicroTaskQueue @ zone.js:477ZoneTask.invoke @ zone.js:426
getting-started.ts:79 Dismissed toast
2

Can you share the code you’re are using?

3

It is the default code given in docs. When date and toast are used together and date is clicked before toast disappears error occurs.

getting-started.html

<ion-navbar *navbar>
    <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
    <ion-title>Getting Started</ion-title>
</ion-navbar>

<ion-content padding class="getting-started">

    <h3>Welcome to Ionic</h3>
    <p>Want to learn some facts? Click below.</p>
    <button (click)="goToFactsPage()">Scientific Facts</button>
    <button secondary menuToggle>Toggle Menu</button>
    
    <ion-item>
        <ion-label>Date</ion-label>
        <ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="myDate"></ion-datetime>
    </ion-item>
    <button (click)="showToast()" dark>Show Toast</button>
</ion-content>`

getting-started.ts

import {Component} from '@angular/core';
import {NavController,ItemSliding, Toast} from 'ionic-angular';
import {ScientificFactsPage} from '../scientific-facts-page/scientific-facts-page';

@Component({
  templateUrl: 'build/pages/getting-started/getting-started.html'
})
export class GettingStartedPage {
 private myDate;
  constructor(private _navController:NavController) {}

        showToast() {
  let toast = Toast.create({
    message: 'User was added successfully',
    duration: 3000
  });

  toast.onDismiss(() => {
    console.log('Dismissed toast');
  });

  this._navController.present(toast);
  }
    }
4

There is already an Issue on GitHub.