Drupal Technical

[SOLVED] File input browse button requiring double click in IE10

Anoop John | | 1 min read

On one of our recent Drupal projects we came across an issue where the file browse button was not triggering the file selection dialog in IE10 in Windows 8. The problem was diagnosed to be the result of jquery not getting the click event from the button. The site was using jquery 1.44 and this problem is supposed to be fixed in later versions of jquery.

The problem was fixed by binding the click event to the mousedown event on the browsebutton which jquery was getting without issues.

The following snippet should do this for IE browsers.

// Handle custom triggering of clicks for browse button in IE10
if (navigator.userAgent.indexOf("MSIE") > 0) {
  $("#field_id").mousedown(function() {
    $(this).trigger('click');
  })
}

The issue was debugged as follows

- Disabled javascript and the file input was tested. There were no problems from IE10 which meant that this had something to do with jQuery binding.
- Tried to add an onclick event in jQuery for the input element with a simple alert. The alert was not triggered. This meant that the onclick event was not being triggered for the button.
- On researching this it was found that there was an issue with jQuery 1.44 and IE10 but the mousedown event was being caught by jQuery. https://github.com/tors/jquery-fileupload-rails/issues/33.

This was then fixed as above by triggering the click event on mousedown using jQuery

 

 

Related Topics