Aurelia Dialog runs 'then' before dialog returns - aurelia-dialog

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">×</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.

Answer 1

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/