title: onclick event doesn't wait for file selection
body: <p>I am trying to use file input in html using a single button.</p>
  <p>My html:</p>
  <pre><code>&lt;input type=&quot;file&quot; class=&quot;btn btn-purple&quot; id=&quot;inventory_csv&quot; name=&quot;inventory_csv&quot; onchange=&quot;this.form.submit()&quot; style=&quot;display:none&quot;&gt;
  &lt;button name=&quot;upload_inventory&quot; id=&quot;upload_inventory&quot; class=&quot;btn btn-purple btn-labeled fa&quot; onclick=&quot;chooseFile()&quot;&gt;Upload Inventory&lt;/button&gt;
  </code></pre>
  <p>Javascript:</p>
  <pre><code>function chooseFile() {
      $(&quot;#inventory_csv&quot;).click();
  }
  </code></pre>
  <p>The script doesn't work properly. When I click the <code>upload_inventory</code> button, it does not wait for me to select the file. It opens the file selection dialog box and navigates to the next page.</p>
  <p>I want it to wait for me to select the file and then go to the next page.</p>