Issues loading configuration on Safari

[EdwardMoyse]

Initially I included this as part of #570, but I think in fact it is different, so let me open a new ticket.

I think it must be a problem with async calls in some manner I really don't understand, but it seems to be in loadFile from https://github.com/HSF/phoenix/blob/main/packages/phoenix-event-display/src/helpers/file.ts

To debug this I put a console.log() in state-manager.ts loadStateFromJSON

When I open phoenix and try to manually load a configuration file, I do not see this output i.e. the configuration file is not loaded (this explains the weird problems that I and others have been having).

If, however, I set a breakpoint at line 30 of file.ts, then I DO see this output. So it seems like forcing the code to stop there allows something else to happen in time?

Digging a bit deeper it seems like the input.onChange https://github.com/HSF/phoenix/blob/ef5a97498d3269e7a99cb4e7d51d92e18131ec62/packages/phoenix-event-display/src/helpers/file.ts#L34

If I change the code to

  inputFile.click();
  setTimeout(() => {
    console.log('Let us just wait a second');
}, 1000);
};

then it works as expected (but obviously this is a hack and not a fix).

I only see this problem on Safari.

Pinging @9inpachi and @DamianArado, who will certainly have a better idea what could be causing this than I do!