Occasionally the modal dialogs can no longer be opened

[chriswilty]

Bug report

Description

Occasionally, the application gets itself into a state in which modal dialogs no longer open. This is really difficult to reproduce as we have yet to spot any pattern; this in itself indicates it might be a timing / race-condition issue.

It is not to do with the React double-render in dev/strict mode, as Kira has also spotted this in Vite preview mode.

Some "close dialog" events trigger other dialogs to open, which seems a likely candidate for this bug. In particular, there is complexity and redundancy in the process to open the MissionInformation dialog, as it is triggered when

• OverlayWelcome dialog is closed by selecting a level (level1 or sandbox)
• LevelsComplete dialog is closed by clicking "go to sandbox"
• currentLevel (local state in App.tsx) changes via a call to setCurrentLevel

Some of these calls are duplicated, for example:

• "go to sandbox" from LevelsComplete causes a double call of closeOverlay
• Both "go to sandbox" from LevelsComplete dialog and selecting a level from OverlayWelcome dialog cause a double call to open the MissionInformation dialog.

These are problematic, because it means we have two calls to close the dialog, and one or two calls to open the MissionInformation dialog, in quick succession. If these occur out of intended order, that might cause the app to get into a corrupt state. It's worth noting that the API docs for HTMLDialogElement.showModal() state an error is thrown if the dialog is already in the "open" state, but our app is not catching that error. It is not clear from the docs what might happen in that case, but it seems entirely plausible that the dialog simply stops functioning.

In any case, we can start by adding some debug logging statements whenever a dialog is opened or closed, to see if any events fire in an unexpected order. We could then try to reproduce the bug, and then remove the redundancy in function calls and see if we can still reproduce the bug.

Reproduction steps

As noted above, this is proving difficult to reproduce, but start by repeatedly switching between sandbox and level1 from the Welcome dialog.

Expected behaviour

Modal dialogs should always appear when clicking related buttons (see below).

Acceptance criteria

• Welcome dialog should open when clicking Getting Started button
• Confirmation dialog should open when clicking Reset Progress button
• Handbook dialog should open when clicking Handbook button
• Mission Information dialog should open when clicking MissionInfo button in level banner
• Mission Information dialog should open when selecting a level from the Welcome dialog
• Mission Information dialog should open when selecting a different level in the app header
• Levels Complete dialog should open when Level 3 is beaten
• Mission Information dialog should open when selecting "go to sandbox" from Levels Complete dialog
• Confirmation dialog should open when clicking Reset Level button
• Document Viewer dialog should open when clicking View Documents button (visible in sandbox only)

[kclark-scottlogic]

Moving back for timing issue where level 1 info flashes a fraction of a second before going to sandbox dialog and vice versa