[Bug] Error message for a required file upload is not shown correctly

[kai-oswald]

Overview of the problem

This is about the Bulma CSS framework, more specifically about the file upload input.

I'm using Bulma version [0.5.1]
My browser is: Chrome / Edge

Description

Trying to submit an empty required file input will not show the default error message correctly.

Steps to Reproduce

1. Add a form with a required file input

<form>
  <div class="file">
    <label class="file-label">
        <input class="file-input" type="file" name="file" required>
        <span class="file-cta">
            <span class="file-icon">
                <i class="fa fa-upload"></i>
            </span>
            <span class="file-label">
                Choose a file…
            </span>
        </span>
    </label>
  </div>
  <button type="submit" class="button is-primary is-outlined">Submit</button>
</form>

2. Try submitting the form without uploading a file

Expected behavior

The browser's default error message is shown

Actual behavior

Chrome: The browser's default error message is only shown for a very short period
Edge: No error message is shown

[jgthms]

The file upload element requires to hide the default file upload, hence why it's experimental. I recommend disabling the submit button before any file is chosen.