Aurelia Dialog runs 'then' before dialog returns

Question

I have a view that launches a confirmation dialog but instead of waiting for the dialog to return with a result, the code jumps straight to the 'then' portion of the promise. See code below:

ConfirmDialog.ts

import { inject } from 'aurelia-framework';
import { DialogController } from 'aurelia-dialog';

@inject(DialogController)
export class ConfirmDialog {
  private message: string;
  private controller: DialogController;

  constructor(controller: DialogController) {
    this.controller = controller;
  }

  public activate(message: string) {
    this.message = message;
  }
}

ConfirmDialog.html

<template>
  <div tabindex="-1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" click.trigger="controller.cancel()" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">Confirmation</h4>
        </div>
        <div class="modal-body">
          ${message}?
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" click.trigger="controller.cancel()">No!</button>
          <button type="button" class="btn btn-danger" click.trigger="controller.ok()">Yes</button>
        </div>
      </div><!-- /.modal-content  -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
</template>

SomeView.ts

import * as moment from 'moment';
import { inject, singleton } from 'aurelia-framework';
import { DialogService } from 'aurelia-dialog';
import { ConfirmDialog } from '../components/modal/confirmDialog';
import { InfoDialog } from '../components/modal/infoDialog';
import { StateStore } from '../common/StateStore';
import { Routing } from '../common/routing';

@singleton()
@inject(Routing, StateStore, DialogService)
export class SomeView {
    private routing: Routing;
    private commonState: StateStore;
    private dialogService: DialogService;

    constructor(routing: Routing, stateStore: StateStore, dialogService: DialogService) {
        this.routing = routing;
        this.commonState = stateStore;
        this.dialogService = dialogService;
    }

    public someButtonClickHandler(someArg: SomeType) {
      if (!this.routing.auth.authenticated) {
        this.routing.router.navigate('#/login');
      }
      this.dialogService.open({
        viewModel: ConfirmDialog,
        model:
          'Do you wish to continue'
      }).then((response) => {
        if (response.wasCancelled) {
          return;
        }

        this.dialogService.open({
          viewModel: InfoDialog,
          model: 'Why is this happening..'
        });
      });
    }
}

I have omitted the html for the view since it works and all bindings are firing correctly. This used to work, I updated the aurelia-bundler which caused a runtime error so I reverted back to a previous version of the bundler. The runtime error stopped but now it seems that Promise is being short circuited. I even tried checking out the project from version control and this keeps happening. Tried clearing the browser cache in case something was wrong there but no matter what I do, the "why is this happening..." always shows before any interaction can happen with the confirmation dialog. When I click 'ok' on the InfoDialog, the confirmation dialog is there underneath and clicking cancel or OK subsequently does nothing.

Any help would be appreciated.

I'm also experiencing this issue. The then() is being triggered as soon as the dialog opens but is ignored on controller.ok() and controller.cancel() Just wondering what version of the dialog you are using. I'm using "aurelia-dialog@1.0.0-rc.1.0.3", the behaviour is correct in the beta version "aurelia-dialog@1.0.0-beta.3.0.1" I guess we could roll back to the beta until a fix is issued. — Rocket Ronz, Aug 10 '17 at 09:08
I'm using 1.0.0-rc.1.0.3 @rocket-ronz. The solution posted below is almost correct, what I did was this.dialogService.open({...}).whenClosed((response) => { ... // my closure code went here ...}); Give that a try and see if it works. — Bitfiddler, Aug 10 '17 at 23:35

score 5 · Accepted Answer · answered Aug 10 '17 at 10:06

This is most likely because of breaking changes in the aurelia-dialog between beta and RC.

Try changing this.dialogService.open({...}).then(...) to this.dialogService.open({...}).whenClosed().then(...).

See the release notes for RC-1: https://github.com/aurelia/dialog/releases/tag/1.0.0-rc.1.

There's also a blog post in Aurelia blog: http://blog.aurelia.io/2017/04/27/aurelia-dialog-release-candidate/

Aurelia Dialog runs 'then' before dialog returns

1 Answers1