Firefox: when tab is pressed, fileupload button text disappears

[ggmoriyon]

trafficstars

How to reproduce: On Basic demo select some text on the paragraph before the file input button and press tab. This behavior is also present on:

• Basic Plus
• Basic Plus UI
• AngularJS

Screenshot:

Suggestion: Add tabindex="-1" attribute on file input like this (basic-plus.html):

<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
  <i class="glyphicon glyphicon-plus"></i>
  <span>Add files...</span>
  <!-- The file input field used as target for the file upload widget -->
  <input id="fileupload" type="file" name="files[]" multiple  tabindex="-1">
</span>

Environments:

• Firefox version 30.0 on Linux Mint
• Firefox version 30.0 on OS X

[blueimp]

This seems to be a regression, as I could not reproduce this with Firefox 27.0.1 on OSX, but could confirm this on the latest Firefox version 31.0 (also tested on OSX).

I've marked this as a browser bug for now, as I think being able to tab to the file input field is a feature important enough that a visual regression is not reason enough to disable it completely.

User @cbauden also submitted a pull request with a fix here, however this also has side effects as mentioned in my comment there: https://github.com/blueimp/jQuery-File-Upload/pull/3281