fix(tap): fire input behavior when tap/clicking file input label. Closes #1699

Author: perrygovier

Diff for: js/utils/tap.js

@@ -228,12 +228,20 @@ ionic.tap = {
   },
 
   requiresNativeClick: function(ele) {
-    if(!ele || ele.disabled || (/^(file|range)$/i).test(ele.type) || (/^(object|video)$/i).test(ele.tagName) ) {
+    if(!ele || ele.disabled || (/^(file|range)$/i).test(ele.type) || (/^(object|video)$/i).test(ele.tagName) || ionic.tap.isLabelContainingFileInput(ele) ) {
       return true;
     }
     return ionic.tap.isElementTapDisabled(ele);
   },
 
+  isLabelContainingFileInput: function(ele) {
+    var lbl = tapContainingElement(ele);
+    if(lbl.tagName !== 'LABEL') return false;
+    var fileInput = lbl.querySelector('input[type=file]');
+    if(fileInput && fileInput.disabled === false) return true;
+    return false;
+  },
+
   isElementTapDisabled: function(ele) {
     if(ele && ele.nodeType === 1) {
       var element = ele;

Diff for: test/html/tapInputs.html

@@ -168,6 +168,15 @@
               <option>United States</option>
             </select>
           </div>
+          <div class="item item-divider">
+            File Input
+          </div>
+          <label class="item item-input">
+            <div class="input-label">
+              <i class="icon ion-document-text"></i> File
+            </div>
+            <input type="file"/>
+          </label>
 
           <div class="item item-divider">
             Other Tests

Diff for: test/unit/utils/tap.unit.js

@@ -746,6 +746,24 @@ describe('Ionic Tap', function() {
     expect( ionic.tap.requiresNativeClick( div5 ) ).toEqual(true);
   });
 
+  it('Should ionic.tap.requiresNativeClick for labels containing input[file]', function() {
+    var lbl = document.createElement('label');
+    var ele = document.createElement('input');
+    ele.type = 'file';
+    lbl.appendChild(ele);
+    expect( ionic.tap.requiresNativeClick( lbl ) ).toEqual(true);
+  });
+
+  it('Should ionic.tap.requiresNativeClick for elements underneath labels containing input[file]', function() {
+    var lbl = document.createElement('label');
+    var txt = document.createElement('span');
+    var ele = document.createElement('input');
+    ele.type = 'file';
+    lbl.appendChild(ele);
+    lbl.appendChild(txt);
+    expect( ionic.tap.requiresNativeClick( txt ) ).toEqual(true);
+  });
+
   it('Should not allow a click that has an textarea target but not created by tapClick', function() {
     var e = {
       target: document.createElement('textarea'),