Input file click not working when wrapped with label in ion-content

ionic-v1
1

Hi,

I am trying to create a file upload button with label wrapping input file. But clicking the label does not trigger the file upload popup.

Codepen: http://codepen.io/anon/pen/ArsCq

Created an issue in github also: https://github.com/driftyco/ionic/issues/1699

Thanks,
Saravanan

2

Works for me on my mac,

What version of ionic are you using? What device are you using? ios or android?

3

Hi,
I tested this with IOS, android and in my mac and it didnt work on anything :frowning:

Even in your code pen, file upload popup opens when the input button is clicked, but it is not working when you click camera icon.

I am using beta 8 version of ionic.

Thanks,
Saravanan

4

This is becuase the icon is being covered by some padding.

I ended up with a much more stratifying solution of this.

This way, if you select the icon or item, everything work and all is good :smile:
Excuse all the !important flags, this was to override some codepen issues.

5

Thanks for your help. This solution will work for some use cases.

But ideally, if label is given “for” attribute as ID of the file input, it should trigger the file upload modal, which is not working.

One of my use case will be having 2 camera icons in different places of page which will trigger same file input click. This is working in normal HTML code. Codepen: http://codepen.io/anon/pen/mhdKt

Could this be related to github issue?

6

So I updated the codpen to the situation you are describing.

So this is happening because of how ionic handles inputs/labels. When you tap a label, we are overriding the default behavior of the for attribute and setting focus to an input inside of a label.

So the codepen I provided, both labels have a for attribute pointing to the same file input, yet only the label with the input inside of it will work.

I’ve tried to set something up where you can trigger the same input with multiple buttons but couldn’t get it to work.

7

Thanks @mhartington for trying this out.

For now, I will use multiple inputs for this. Is there any fix planned for this?

Thanks again.

8

As per @perrygovier, in issue https://github.com/driftyco/ionic/issues/1699#issuecomment-47702197, by adding data-tap-disabled=“true” worked for me.

3 Likes