Why file open dialog opens twice on clicking the button in FireFox

Question

I have a file <input> field and a <span> decorates the input field:

<span class="span5 btn btn-primary btn-file" id="chose_files_btn" onclick="filechose_button.click()">chose files
    <input id="filechose_button" type="file" name="fileData" size="1" style="display: none"/>
</span>

While the behavior of this is as I suppose in Chrome and Safari, FireFox opens two file input dialogs on clicking the button(span).

Why could happen so?

I assume, that file input field is invisible and only access to it is through the span with a button behavior.

Update:

if I put the <input> outside of <span> it behaves normally.

 <span class="span5 btn btn-primary btn-file" id="chose_files_btn" onclick="filechose_button.click()">chose files</span>
 <input id="filechose_button" type="file" name="fileData" size="1" style="display: none"/>

JSFiddle

but why on inside position it does not?

Answer 1

It is because of some kind of event propagation mess

<span class="span5 btn btn-primary btn-file" id="chose_files_btn" onclick="doOpen(event)">chose files
    <input id="filechose_button" type="file" name="fileData" size="1" style="display: none"/>
</span>

And

function doOpen(event){
    event = event || window.event;
    if(event.target.id != 'filechose_button'){
        filechose_button.click();
    }
}

Demo: Fiddle