When opening a dialog, it is shown more than once
Tried to prevent double opening by checking if a dialog is already open
if (!this.dialogService.hasOpenDialog) {
return this.dialogService
.open({ viewModel: AssignTeam })
.whenClosed((response) => {
if (!response.wasCancelled) {
return this.protectionService.assignTeam(devices, response.output);
}
this.selectedDevices.splice(0);
});
}
Expected: One dialog should be shown. When the user clicks ok it should be gone Actual: The dialog is opened more than once. When the user clicks ok, he is presented by the same dialog and has to cancel it
Here is the html when opening the dialog:
<body class="ux-dialog-open">
<ux-dialog-overlay style="z-index: 1000;" class="active"></ux-dialog-overlay>
<ux-dialog-container style="z-index: 1000;" class="active">
<div style="margin-top: 84.5px; margin-bottom: 84.5px;">
<div>
<div class="popup">
<div class="black-bg1">
<ai-dialog class="modalpopup-container padd35 dis-block">
<ai-dialog-header>
<!-- omitted -->
</ai-dialog-header>
<ai-dialog-body>
<!-- ommited-->
</ai-dialog-body>
<ai-dialog-footer class="text-center">
<!-- ommitted-->
</ai-dialog-footer>
</ai-dialog>
</div>
</div>
</div>
</div>
</ux-dialog-container>
<ux-dialog-overlay style="z-index: 1000;" class="active"></ux-dialog-overlay>
<ux-dialog-container style="z-index: 1000;" class="active">
<div style="margin-top: 84.5px; margin-bottom: 84.5px;">
<div>
<div class="popup">
<div class="black-bg1">
<ai-dialog class="modalpopup-container padd35 dis-block">
<ai-dialog-header>
<!-- omitted-->
</ai-dialog-header>
<ai-dialog-body>
<!-- omitted-->
</ai-dialog-body>
<ai-dialog-footer class="text-center">
<!-- omitted-->
</ai-dialog-footer>
</ai-dialog>
</div>
</div>
</div>
</div>
</ux-dialog-container>
<script id="__bs_script__">
//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.3'><\/script>".replace("HOST",
location.hostname));
//]]>
</script>
<script async="" src="/browser-sync/browser-sync-client.js?v=2.26.3"></script>
<div aurelia-app="main" class="page_container">
<!-- omitted-->
</div>
<script src="scripts/vendor-bundle.js"></script>
<script>
requirejs.config({
skipDataMain: true
});
// Configure Bluebird Promises.
Promise.config({
longStackTraces: false,
warnings: false,
cancellation: true
});
require(['aurelia-bootstrapper']);
</script>
<div></div>
<div></div>
</body>
Also tried to investigate more, using this code:
if (!this.dialogService.hasActiveDialog) {
console.log(this.dialogService);
return this.dialogService
.open({ viewModel: AssignTeam })
.then((openDialogResult: DialogOpenResult) => {
console.log(openDialogResult);
return openDialogResult.closeResult;
});
It seems like two controllers are allocated
