Dialog does not close on web version of Outlook - outlook

Question

I have an add-in that opens a dialog box using Office.context.ui.displayDialogAsync() with displayInIframe: true
When I click the 'X' close button in the top righthand corner nothing happens.
Similarly, when I call dialog.close() or Office.context.ui.closeContainer() nothing happens.
I have tested this on chrome and edge, both have this issue (I have not tested other browsers).
On the desktop app this works without any issues.
Simplified code for displaying the dialog window:
Office.context.ui.displayDialogAsync(url, { height: 60, width: 60, displayInIframe: true }, asyncResult => {
if (handleError(asyncResult)) return;
dialog = asyncResult.value;
const dialogClosed = async (_: any): Promise<void> => {
console.log("dialogClosed");
};
dialog.addEventHandler(Office.EventType.DialogEventReceived, dialogClosed);
dialog.addEventHandler(Office.EventType.DialogMessageReceived, processMessage);
const promises = [];
{working business logic}
Promise.all(promises).then(values => {
{working business logic}
event.completed();
});
});
If I add an event handler for DialogEventRecieved, as far as I can tell this is never triggered on web.
Any suggestion would be appreciated. Thanks.

Answer 1

The problem can be related to the following part of your code:
const promises = [];
{working business logic}
Promise.all(promises).then(values => {
{working business logic}
event.completed();
});
Try to remove any extra code for promises and just use something like that:
let dialog;
Office.context.ui.displayDialogAsync('https://myDomain/myDialog.html',
function (asyncResult) {
dialog = asyncResult.value;
dialog.addEventHandler(Office.EventType.DialogMessageReceived, processMessage);
}
);
function processMessage(arg) {
dialog.close();
// message processing code goes here;
}
Read more about that in the Use the Office dialog API in Office Add-ins article.