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

**URL:** <https://discourse.aurelia.io/t/resolved-aurelia-dialog-v1-doesnt-close-cancel-the-dialog-properly/3810>\
**Category:** Uncategorized\
**Created:** [October 1, 2020, 1:46pm UTC](https://discourse.aurelia.io/t/resolved-aurelia-dialog-v1-doesnt-close-cancel-the-dialog-properly/3810 "2020-10-01T13:46:27Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![tatsianabts](https://avatars.discourse-cdn.com/v4/letter/t/c2a13f/32.png) [@tatsianabts](https://discourse.aurelia.io/u/tatsianabts)\
**Post date:** [October 1, 2020, 1:46pm UTC](https://discourse.aurelia.io/t/resolved-aurelia-dialog-v1-doesnt-close-cancel-the-dialog-properly/3810/1 "2020-10-01T13:46:27Z")

</div>

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](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/d/dd39a565bb717b7f5567019275eeb1c46e82107a.png)

---

<div class="post-metadata">

**Author:** ![tatsianabts](https://avatars.discourse-cdn.com/v4/letter/t/c2a13f/32.png) [@tatsianabts](https://discourse.aurelia.io/u/tatsianabts)\
**Post date:** [October 1, 2020, 4:51pm UTC](https://discourse.aurelia.io/t/resolved-aurelia-dialog-v1-doesnt-close-cancel-the-dialog-properly/3810/2 "2020-10-01T16:51:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![avrahamcool](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/avrahamcool/32/368_2.png) [@avrahamcool](https://discourse.aurelia.io/u/avrahamcool)\
**Post date:** [October 1, 2020, 6:02pm UTC](https://discourse.aurelia.io/t/resolved-aurelia-dialog-v1-doesnt-close-cancel-the-dialog-properly/3810/3 "2020-10-01T18:02:53Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [October 1, 2020, 10:36pm UTC](https://discourse.aurelia.io/t/resolved-aurelia-dialog-v1-doesnt-close-cancel-the-dialog-properly/3810/4 "2020-10-01T22:36:23Z")

</div>

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

> <https://github.com/aurelia/dialog/blob/c5908b238a61926e1b9788cb6dbaf6e9f53ee4e6/src/dialog-service.ts#L189>

---

<div class="post-metadata">

**Author:** ![mroeling](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mroeling/32/781_2.png) [@mroeling](https://discourse.aurelia.io/u/mroeling)\
**Post date:** [October 2, 2020, 7:50am UTC](https://discourse.aurelia.io/t/resolved-aurelia-dialog-v1-doesnt-close-cancel-the-dialog-properly/3810/5 "2020-10-02T07:50:37Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [October 5, 2020, 10:57pm UTC](https://discourse.aurelia.io/t/resolved-aurelia-dialog-v1-doesnt-close-cancel-the-dialog-properly/3810/6 "2020-10-05T22:57:59Z")

</div>

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

@tatsianabts try

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

```

---

<div class="post-metadata">

**Author:** ![tatsianabts](https://avatars.discourse-cdn.com/v4/letter/t/c2a13f/32.png) [@tatsianabts](https://discourse.aurelia.io/u/tatsianabts)\
**Post date:** [October 6, 2020, 5:25am UTC](https://discourse.aurelia.io/t/resolved-aurelia-dialog-v1-doesnt-close-cancel-the-dialog-properly/3810/7 "2020-10-06T05:25:13Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![mroeling](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mroeling/32/781_2.png) [@mroeling](https://discourse.aurelia.io/u/mroeling)\
**Post date:** [October 6, 2020, 6:21am UTC](https://discourse.aurelia.io/t/resolved-aurelia-dialog-v1-doesnt-close-cancel-the-dialog-properly/3810/8 "2020-10-06T06:21:34Z")

</div>

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.