File upload - Original button visible in Chrome latest version

[mm98]

This is about Bulma.

it about Bulma
Is it a bug
If it's a bug, is it a browser bug? Yes

This is about the Bulma CSS framework
I'm using Bulma 0.7.1
My browser is: Google Chrome v67.0.3396.62 (win10)
I am sure this issue is not a duplicate? Yes (checked)

Steps to Reproduce

It seams like a bug related to the latest Google Chrome. If you look at https://bulma.io/documentation/form/file/ you'll see that the original upload file button is visible (sass).

Expected behavior

Original form file/upload control should be hidden/invisible.

Actual behavior

Original form file/upload control is visible.

[jgthms]

Ugh it was the bug fix I merged yesterday. I knew something would break.

[mm98]

Don't think so .. I haven't updated my local version and this shows the same problem. It works ok in FF and IE.

[jgthms]

Are you on Linux? I can't reproduce:

[mm98]

No, this is very odd. This started after i updated to the latest official Google Chrome v67.0.3396.62 (64bit) without any extensions (released a couple of days ago) on Windows 10. I'll try to do some more debugging.

[mm98]

This must be a specific Google Chrome on Windows problem. I just installed Chrome on another machine, and the same happens:

Update: Is there any specific reason why the .file-input isn't just display: none? I just tested it here (with post-back), and it seams to work on all major browsers (latest versions tho).

[ekiwi111]

Can confirm, using Chrome (67.0.3396.87) on Mac OS X Sierra (10.12.6):

Why not just add display: none to .file-input?

[mm98]

The file input can't be set to display: none i guess, since it will break a lot of third-party plugins like jquery validate. If the element is set to display: none, it won't get validated. visibility: hidden works with jquery validate.

[mm98]

It looks like css height and width has no effect on the button itself (in Google Chrome lastest version). This will only change the textbox (lack of a better word) where the filename(s) is shown. Twitter Bootstrap uses opacity: 0 on file inputs. This might be a good solution.

This will also allow the jquery validation to focus on the element, even tho it is hidden with opacity. This wasn't possible with visibility: hidden.

[vikdotdev]

I'm having the same issue.

Windows 10 Pro, v1803.
Chrome 68.0.3440.106 (Official Build) (64-bit)
The issue is also present in another somewhat popular webkit browser Opera. Tried it on version 55.0.2994.44.

Can confirm that adding opacity: 0 fixes the issue in both of them.

[net1957]

would be nice if this can be added to the 7.2 release.
Thanks