Place file input inside ion-content won't allow user to select file on Mobile Safari

[phuongnd08]

I put a simple <input type="file"> inside ion-view > ion-content and user can't click on it to select file. Its screenshot:

This is the codepen: http://codepen.io/anon/pen/EmaiB

[adamdbradley]

I tested the codepen example on iOS6 iPad, iOS7.0 iPad, and iOS7.1 iPhone5 and they all worked.

[phuongnd08]

It worked on iOS 7.0 Simulator for me. But failed on iOS 6.1 iPhone 5, iOS 6.1 Simulator (both iPhone and iPad).

[adamdbradley]

Are you including any other libraries, or using the codepen example directly which uses an iframe? I also tested with iOS 6.1 iPhone 4 simulator, and 6.1 iPhone 5 simulator and it worked every time. One note though is that the input[file] is not able to remove the 300ms delay, which is all the more confusing because all of the tap/click code is being avoided because its type is a file.

[phuongnd08]

The codepen above does not use any library except ionic-bundle, and it doesn't work on my iOS 6.1 (iphone 5) and any simulator against iOS 6.1. I'm open using the iframe URL and it doesn't work as well. To be clear, my iphone 5 is running iOS 6.1.4 - 10B350 and my simulator is running iOS 6.1 - 10B141.

[phuongnd08]

I just modified the code pen to include 2 file inputs. One outside of ionic and one inside. The one outside is working fine. The one inside is not responding to click: http://codepen.io/anon/pen/EmaiB

[yxztj]

I'm facing the exact same issue. The file input is not working inside ion-content, but everything fine outside. Tested both on Android 4.4 and iOS 7.0.4.

[yxztj]

@adamdbradley Some additional information about the issue:

1. I was using ionic 0.9.27, file input was OK. When I upgraded to ionic beta2 yesterday, the issue appeared.
2. To repro the issue, create a project by: ionic start myApp tabs, modify www/templates/friend-detail.html like this:

<input  type="file" style="position: absolute;z-index: 99999; top:80px;" />
<ion-view title="{{friend.name}}">
  <ion-content has-header="true" padding="true">
   <input  type="file" style="position: absolute;z-index: 99999; top:120px;" />
 </ion-content>

The first input above ion-view is working properly, but the second input inside ion-content is not working.
3. The issue can repro on an ios simulator(7.0.4) or iphone5/Android device, but CANNOT repro on desktop Chrome/Safari/Firefox.
4. I just upgraded to beta3, the issue is still there.

Thanks!

[adamdbradley]

Ok, I finally see what the issue was, thanks for staying on it and providing some testing scenarios. It came down to the scroll's touchstart event having to not preventDefault for a file input, which is the same with range inputs. Thanks!

[yxztj]

@adamdbradley It works now. Thanks:)

[phuongnd08]

👍 Thanks @adamdbradley

[adamdbradley]

Great, thanks for helping debug!

[kovacssupki]

i have this problem also in ionic 1!!! please check if there was some regression?

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.