Vuetify: [Bug Report] VFileInput does not work with Safari on MacOS or iOS When click on placeholder or label text

[MingYang2008]

Environment

Vuetify Version: 2.2.17
Vue Version: 2.6.11
Browsers: Safari 13.0.5, Safari
OS: Mac OS 10.15, iOS

Steps to reproduce

click placeholder text to Select a file

Expected Behavior

The filename should be displayed in the File Input component

Actual Behavior

Nothing is in the File Input component

Reproduction Link

https://codepen.io/anon/pen/RXaPOX?&editable=true&editors=101

[MingYang2008]

I tested more than ten Apple devices to access the official website documents, each with this bug. Am I the only one with this bug?

[jaxn]

We are seeing a similar using v-file-input for pictures. When selecting from the existing files on iOS there are devices that put 0 files in the input, and there are devices that put double files in the input.

[MingYang2008]

This problem only occurs in click placeholder or label text, and the same problem exists in MacOS.

[johndalangin]

For some reason unbeknownst to human kind, removing the file input element eliminates the problem completely:

// fix for v-file-input not triggering properly
let inputs = document.querySelectorAll('.v-file-input input');
[...inputs].forEach((input) => {
    input.remove()
})

Can anyone verify and fathom an explanation?

🙏

[johndalangin]

Upon further investigation, it seems that the file input element is the target of the click/touch event even if it isn’t supposed to be. It’s still clickable even if it’s hidden via css max-width: 0.

I’m guessing that the problem is a bubbling/propagation issue that interferes with the intended click/touch handler.

[Meowzz95]

Tested iOS Safari, macOS Safari. The bug happens every time.

[johndalangin]

Tested iOS Safari, macOS Safari. The bug happens every time.

Can you confirm if this still happens if you delete the input element?

You can run this script to test:

// fix for v-file-input not triggering properly
let inputs = document.querySelectorAll('.v-file-input input');
[...inputs].forEach((input) => {
    input.remove()
})

@Meowzz95

[Meowzz95]

@johndalangin
I tried adding the following code which you provided above in component's created hook, the issue still happens.

// fix for v-file-input not triggering properly
let inputs = document.querySelectorAll('.v-file-input input');
[...inputs].forEach((input) => {
    input.remove()
})

Do I need to put this somewhere else?

[johndalangin]

@Meowzz95
I'm not sure if the component has rendered completely yet. Can you try mounted() or better yet, just running the code in your console after everything has loaded?

[KevinFabre]

@johndalangin
I tried adding the following code which you provided above in component's created hook, the issue still happens.

// fix for v-file-input not triggering properly
let inputs = document.querySelectorAll('.v-file-input input');
[...inputs].forEach((input) => {
    input.remove()
})

Do I need to put this somewhere else?

I think you need to put it in themounted()

[Meowzz95]

@johndalangin @KevinFabre
Put it in mounted() hook works!

[johndalangin]

@Meowzz95 Nice!

Now I guess the next step to figure out is why this is happening. From my observation, for some reason, when you click on the place holder or label, the input element is the one that gets clicked and becomes the base target of the event.

I noticed this when I tried the "Start element selection" Command + Shift + C (⌘⇧ + C) and tried to click on the placeholder or label, even if the target should be the placeholder or label.

[Meowzz95]

@johndalangin
Make sense to me, but I'm not really familiar with Vuetify enough to fix this. Let me learn a bit first while waiting for good news here 😝

[johndalangin]

I'm posting this issue summary for everyone's reference and convenience.

Suspected Root Cause

Probably, the main cause of this Safari issue is that for some reason, even if the inner file <input> element is "hidden" via css, it still ends up intercepting the clicks intended for the adjacent elements such as placeholder or label.

/* width 0 means that it should "hidden" and not a clickable DOM element */
.v-file-input input[type=file] {
  left: 0;
  opacity: 0;
  position: absolute;
  max-width: 0;
  width: 0;
}

Testing the Issue

The easiest way to test the issue is by visiting the Vuetify documentation using Safari...

https://vuetifyjs.com/en/components/file-inputs/#examples

and trying to click on any placeholder element:

The actual result is that after you select a file, it disappears; whereas the intended result is that the file should be added to the UI.

When tested via "Start element selection" (⌘⇧ + C) on Safari, it becomes apparent that the <input type="file"> element does indeed intercept clicks that are meant for other elements.

<input multiple="multiple" id="input-1174" type="file">

When the same "Start element selection" (⌘⇧ + C) technique is used on MacOS Chrome, the element that is (correctly) selected is the parent <div> of the the <input> element:

<div class="v-file-input__text"></div>

Assessment

For one, I think it is most likely is a bug with Safari. How could something with width: 0 be clickable right? I'm not too familiar with the inner workings of VFileInput, but I suspect that the unwanted click interception is causing a redundant DOM event bubbling effect which triggers multiple events that eventually negates the file attachment process.

Impact

The impact is HIGH.

Especially on mobile Safari where there is not enough space to tap around the component and "find the right place to tap", there is literally no way to trigger the file element correctly without tapping on the label or placeholder, rendering the component utterly unusable.

Current Workaround

The current workaround is to remove the <input> element altogether, although I am unsure if this will create unwanted consequences. Inserting the following code in the mounted() vue function will automatically remove the input elements:

// fix for v-file-input not triggering properly
let inputs = document.querySelectorAll('.v-file-input input');
[...inputs].forEach((input) => {
    input.remove()
})

So far this method has been deployed in several of our production apps and no consequences are observed, however a long term fix is definitely necessary.

Permanent Mitigation

I am uncertain as to how to proceed about this issue since it most likely is a Safari bug (or feature). However the easiest way to mitigate the issue is to figure out a css way of "hiding" the <input> element in such a way that it does not intercept clicks.

My guess is that, Safari is not honoring the width: 0 directive, and is somehow lurking on top of the placeholder/label elements, thereby hijacking clicks that aren't meant for it.

Thank you and hope this helps.

[MingYang2008]

This bug still exists :thinking:

[arunahk]

I'm facing the same issue iPhoneX 12.4. Works in OSX 10.15.6 though.

[mikebronner]

Tested in Safari 14 on macOS 11 beta 8, still an issue.

[johnleider]

Thank you for your patience on this. The new docs consumed my maintenance time.

[johndalangin]

@johnleider Thank you very much, appreciate your work on this awesome package

[kyrylo93]

still problem )

[SRendonn]

Adding the @click.stop modifier in the v-file-input component worked for me. Tested it in Safari on the iPhone 8.