Chrome dismisses confirm() promps immediately without any user interaction

Question

Some users of our website report that confirm dialog boxes appear, but immediately disappear, as if they are being dismissed automatically. This appears to be affecting Chrome only, not other browsers (not even Chromium).

Searching for similar issues finds many people complaining about confirm dialogs within onbeforeunload, but that is not my issue: this is not in that situation. The confirm dialog is shown when the page initially loads (triggered by jQuery $(document).ready()).

The Chrome documentation shows that confirm will not activate its tab and will be dismissed when the tab is switched from. That’s fine: the tab is already active (the confirm dialog appears on page load), and I am happy for it to be dismissed when the tab is switched from. The issue is that it’s being dismissed immediately, without any user interaction.

I found one similar report, but in that case the confirm prompts never appeared in the first place. It looks like what we’re seeing is something different.

$(document).ready(function() {
var c = confirm('Are you sure you wish to delete this entry?');
if (c) {
    $.ajax(
        '/api/show/competition/delete',
        {
            'method': 'POST',
            'data': { 'id' : 9 },
            'dataType': 'json',
            'complete': function(response, status) {
                if (response.responseJSON.error) {
                    alert(response.responseJSON.message);
                    window.location.reload();
                } else {
                    document.location.href = "/show/application/competition";
                }
            }
        }
    );
} else {
    document.location.href = "/show/application/competition/entry/9";
}
});

---

We could use a jQuery modal window if necessary, but it seems silly to use an entire library to replace one line of code. And native browser alerts tend to look better in mobile browsers anyway.

Answer 1

I had exactly same issue. It seems like a chrome issue.

It requires a trick. In my case, it worked by putting 0.1 sec delay with setTimeout function.

Try this. It will work.

function doConfirm() {
  var c = confirm('Are you sure you wish to delete this entry?');
  if (c) {
    $.ajax(
        '/api/show/competition/delete',
        {
            'method': 'POST',
            'data': { 'id' : 9 },
            'dataType': 'json',
            'complete': function(response, status) {
                if (response.responseJSON.error) {
                    alert(response.responseJSON.message);
                    window.location.reload();
                } else {
                    document.location.href = "/show/application/competition";
                }
            }
        }
    );
  } else {
    document.location.href = "/show/application/competition/entry/9";
  }
}

$(document).ready(function() {
  setTimeout(function(){ doConfirm() }, 100);    
});