Hopefully fix the issues with loading configurations. Fixes #582.

packages/phoenix-event-display/src/helpers/file.ts

@@ -28,24 +28,31 @@ export const loadFile = (
   contentType: string = 'application/json',
 ) => {
   // Create a mock input file element and use that to read the file
-  let inputFile = document.createElement('input');
+  const inputFile = document.createElement('input');
+  document.body.appendChild(inputFile);
   inputFile.type = 'file';
   inputFile.accept = contentType;
-  inputFile.onchange = (e: any) => {
+  inputFile.onclick = (e: any) => {
+    e.target.value = '';
+  };
+
+  inputFile.addEventListener('invalid', (e) => {
+    console.log(JSON.stringify(e));
+  });
+
+  const fileSelected = (e: any) => {
     const configFile = e.target?.files[0];
     const reader = new FileReader();
     reader.onload = (e) => {
       if (e.target && e.target.result) {
         onFileRead?.(e.target.result.toString());
       }
       inputFile.remove();
-      inputFile = document.createElement('input');
-      // For explanation, see https://stackoverflow.com/a/26221525
     };
     reader.readAsText(configFile);
   };
+
+  inputFile.oninput = fileSelected;
+  inputFile.onchange = fileSelected;
   inputFile.click();
-  setTimeout(() => {
-    console.log('Let us just wait a second');
-  }, 1000);
 };

packages/phoenix-event-display/src/managers/state-manager.ts

@@ -106,11 +106,13 @@ export class StateManager {
       typeof json === 'string' ? JSON.parse(json) : json;
 
     if (jsonData['phoenixMenu'] && this.phoenixMenuRoot) {
+      console.log('StateManager: Processing phoenixMenu configuration');
       this.phoenixMenuRoot.loadStateFromJSON(jsonData['phoenixMenu']);
       this.phoenixMenuRoot.configActive = false;
     }
 
     if (jsonData['eventDisplay']) {
+      console.log('StateManager: Processing eventDisplay configuration');
       this.activeCamera.position.fromArray(
         jsonData['eventDisplay']?.['cameraPosition'],
       );