Sometimes dialogs don't open w/Webpack -- now reproducible, probably not webpack

Help Requests
1

I am having a problem where sometimes one of my dialogs doesn’t visibly open but it is inserted into the DOM – which causes an invisible item at z-index 1000 which traps all clicks

It seems similar to this ticket: https://github.com/aurelia/dialog/issues/361#issuecomment-424613865

which seems to have been diagnosed here: https://github.com/aurelia/webpack-plugin/issues/154

There is no error, it’s just that the dialog doesn’t close and it’s not “open” so you can’t see it

It intercepts all clicks – makes is seem like everything’s frozen…

2

Can you provide a reproduction? It sounds like an css issue to me but let’s have a look.

3

This has been a really weird one. The problem shows up so infrequently I don’t know what actually triggers it – I’ve not been able to consistently reproduce it. The production system talks with 3 other external systems and 2 local bits of hardware, all of it running geographically distant with no direct connection available for me to really work with the production units.

But I might have solved this. I had interleaved Promise(res,rej), promises w/.then() & .catch(), and try-catch blocks – and there were times when an expected parameter (supposed to be a promise) was coming in as undefined.

When I replaced the Promise(res,rej) code with returning Promise.resolved() and put an outer try-catch on it all - the problem seems to have gone away in dev and staging

I’m scheduling time w/production for a few dozen field-units – I have high hopes…

1 Like
4

yeah, it’s very odd – I am using the position field in the .open(config) config object to add a class to the modal dialog which is then defined in my .scss file for that dialog

position: (modalContainer) => {
    modalContainer.classList.add('pdf_scroller-container');
}

when the dialog shows up it’s got the right size and the location is right - but there is no content

that made me think a promise was rejecting and there was nothing seeing that – but I have the uncaught-exception and unhandled-rejection modules loaded, and they see nothing.

In my thrashing about I was able to get an error to show up in the console, and at the same time the dialog was visible but empty – suggesting that the data that was to be interpolated into it was missing – so it had to be something in my code (it usually is :slight_smile:

Thanks for replying!

1 Like
5

My hoped-for-fixes have not worked…

But I have figured out how to simulate the problem, by introducing an error into the positioning code

position: (modalContainer) => {
    modalContainer.classList.undefined.add('pdf_scroller-container');
}

To be clear: doing this does show an error in my logs that does not show up there when the real problem hits – but the result of this reproduces the issue 100% of the time.

An invisible dialog is then covering the app and I’m locked out.