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

#1699
ionic-team · Jul 2, 2014 · 889482e · 889482e
1 parent 39f6e3a
commit 889482e
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git a/js/utils/tap.js b/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 --git a/test/html/tapInputs.html b/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 --git a/test/unit/utils/tap.unit.js b/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'),