Input element with file type does not work in chrome - Angular 2

Question

I am working on an Angular 2 app. Please see a part of template below -

     <label class="import-label" title="Select file">
          <span class="grid-btn fa fa-folder">
             <input type="file" class="form-control import-input-file" id="contactname" aria-describedby="contactname" 
              placeholder="File Name" name="filename" style="display:none;"
             (change)="onChange($event)">
           </span>
    </label>

Screenshot -

When I click on the folder icon button, dialog for selecting a file does not get open up in Chrome(It works for IE as expected). It, however, works on a double click in Chrome.

Note :

The input tag has display:none .

Answer 1

在标签上添加for =“ contactname”

<label class="import-label" title="Select file" for="contactname">