Chrome browser version 72.0.3626.96 bug triggering <input type="file"> click (file select dialog) from javascript function

Question

In Chrome version 72.0.3626.96, I have a simple example where I set up an anchor <a> (styled as a button using bootstrap) and I also setup an <input type="file">. I hide the <input type="file"> using CSS and then use some JavaScript to trigger the file selection dialog when the anchor is clicked.

For example:

$('#upload-button').on('click', function(e) {
  if (confirm('Are you sure?')) {
    $('#upload-file').trigger('click');
  }
});

#upload-file {
  display: none;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col">
      <a id="upload-button" class="btn btn-primary">
        <span>Upload Something!</span>
      </a>
      <input type="file" id="upload-file">
    </div>
  </div>  
</div>

The way it should work is that the user clicks on the <a> button, this launches a confirmation dialog, then, the user clicks "OK" and this opens the file selection dialog.

This works in Firefox and in earlier versions of Chrome, and oddly enough it even works in Chrome version 72.0.3626.96, as long as you click the "OK" button in the confirm message fast enough after it opens.

The bug is that if you wait 2-4 seconds after the confirm message opens and then click "OK" it will not open the file selection dialog.

Any ideas about how to make this work? Does it look like this is a legitimate bug in this release of Chrome that should be submitted?

UPDATE: I have come to the conclusion this is probably somehow related to security updates for User Activation (although I am not sure specifically why)... however it seems easier and cleaner in the long run anyway to just replace the old school confirm() with a more modern modal approach. Clicking an actual button within a bootstrap modal seems to always work correctly.

New Example Here:

$('#upload-button').on('click', function() {
  $('#upload-confirm-modal').modal();
});

$('#upload-confirm-button').on('click', function() {
  $('#upload-file').trigger('click');
  $('#upload-confirm-modal').modal('hide');
});

#upload-file {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col">
      <a id="upload-button" class="btn btn-primary">
        <span>Upload Something!</span>
      </a>
      <input type="file" id="upload-file">
    </div>
  </div>  
</div>

<!-- Modal -->
<div class="modal fade" id="upload-confirm-modal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <h4>Are you sure?</h4>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
        <button type="button" class="btn btn-primary" id="upload-confirm-button">Yes</button>
      </div>
    </div>
  </div>
</div>

Answer 1

The Chrome team has resolved this issue as By Design with the note that this was an intentional change made to prevent a user-activation flag from remaining set for too long. crbug.com/936505

I've asked them to consider adding a console warning for this scenario to aid future debuggers.