trigger input file click on modal on first page load doesn't fire

Question

Using angularJS, I have a modal that should trigger a input file in order to upload a file.

this is the function that triggers the click

function triggerUploadMethod()
{
    inputFile = document.createElement('input');
    inputFile.type = 'file';
    inputFile.onchange = photoChosen;
    inputFile.click();
}

The thing that is boring me is that on the FIRST page load, when I open the modal, the trigger is not fired. If I close the modal and open again, the trigger WORKS, and it will keep working until the next page load... What can be happening to not work on the first page load?

This only happens on Chrome. On Firefox, Edge and Internet Explorer the trigger works every time, even after a page load...

Answer 1

As a disclaimer I've never used Angular and since you didn't provide any of the other code, I went with vanilla JavaScript.

As far as I can tell, the error in your code is not from what you posted above. In the snippet below, I have taken code from W3Schools How to Make a Modal Box With CSS and JavaScript and then added your function to the part where it opens the modal on button click and it works fine (I'm on Chrome).

 // Get the modal var modal = document.getElementById('myModal'); // Get the button that opens the modal var btn = document.getElementById("myBtn"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // This variable isn't defined in your code so I just assume // it's somewhere at the top. var inputFile; // When the user clicks on the button, open the modal. // Also creates your input and clicks it. btn.onclick = function() { modal.style.display = "block"; triggerUploadMethod(); } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } // Create the input element and click it. function triggerUploadMethod() { inputFile = document.createElement('input'); inputFile.type = 'file'; // I have no idea what this is so I can't include it. //inputFile.onchange = photoChosen; inputFile.click(); } 

 /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content/Box */ .modal-content { background-color: #fefefe; margin: 15% auto; /* 15% from the top and centered */ padding: 20px; border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */ } /* The Close Button */ .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } 

 <!-- Trigger/Open The Modal --> <button id="myBtn">Open Modal</button> <!-- The Modal --> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">&times;</span> <p>Some text in the Modal..</p> </div> </div>