RESOLVED: Aurelia Dialog v1: doesn't close/cancel the dialog properly

1

RESOLVED: ignoreTransitions = true is required
Hi, I am using aurelia-dialog 1.0.0 and the problem is :

  1. My App is opened, dialog is shown
  2. My app becomes hidden while dialog is opened (hidden attribute) 3) Then app becomes visible again and I try to close all opened dialogs (dialog controllers contain non-empty array and I trigger close() or cancel). The problem is that although the dialog is not actually shown, overlay stays and it blocks my app.
    Any suggestion? Thanks

import {inject } from ‘aurelia-framework’;
import { DialogController } from ‘aurelia-dialog’;

@inject(DialogController)
export class DialogError {
constructor(
private dialog: DialogController
) {}

public activate(args) {
    Object.assign(this, args);

    if (!args.ignore) {
        this.dialog.settings.lock = true;
    }
}

}

public closeDialog(): void {
    if (this.dialog.hasActiveDialog) {
        this.dialog.controllers.forEach(dialog => {
            dialog.cancel();
        });
    }
}

public hasActiveDialog(): boolean {
    return this.dialog.controllers.length >= 1;
}

How I open the dialog:

this.dialog.open({ viewModel: DialogError, model: errorSettings })
As far as I can see, dialog.cancel() or close() is triggered but it doesn’t result in remove this overlay+container from the DOM and it doesn’t clear dialog.controllers

2020-10-01_16h51_57

1 Like
2

it looks as if promise in hideDialog is never resolved, it stays pending. I used ignoreTransitions = true and eventually my overlay and container are removed.

1 Like
3

what a coincidence, I was facing the same issue today and set myself to investigate in the evning.
you saved me a lot of time.

while debugging the problem, I noticed that the overlay (or one of it’s childs) is still present in the page with opacity:0, so I tried to change it to opacity:1 in the dev-tools just to see what’s where,
but setting the opacity to 1 caused the overlay to close.
so this really indicated a problem with the animation mechanics.
because the app is not visible when the closing is happening - something is not triggered in the right time and causing an issue…

1 Like
4

Another API you can try: if you inject DialogService, you can use this.dialogService.closeAll() (returns promise) and catch error.

1 Like
5

I encountered this effect recently as well! But not within dialogs.
If I remember correctly, in my case it was caused by one of the recent Bootstrap changes.

In case you use bootstrap, try to revert to 4.5.0.

Please let us know if it changes anything!

1 Like
6

You reminded me aurelia-dialog has some edge cases with css transition (modal dom fading when closing).

@tatsianabts try

.plugin(PLATFORM.moduleName('aurelia-dialog'), config => {
        config.useDefaults();
        config.settings.ignoreTransitions = true;
2 Likes
7

Hi, thank you, yes, as I wrote above, my 1st comment after the post, during investigation the source code I found this setting ignoreTransitions and applied true, the problem disappeared.
Thank you all for your answers and support!

1 Like
8

To finalize my reply from before: the problem arose with the aurelia-notify toasters. They weren’t visible anymore, but were still positioned in the bottom-left corner, causing some buttons to be inaccessable. They too had opacity:0.

1 Like