Dragged file input still shows required alert

[hkchakladar]

Describe the bug

When required is used in b-form-file and a file is dragged, it still shows select a file alert on submit.

It works fine with selecting file from the popup file system.

Steps to reproduce the bug

1. Go to https://codesandbox.io/s/form-required-drag-0uccq
2. Drag a file in the Choose file form.
3. Submit form, it shows alert.
4. Now click on Choose a file and select a file from the selector.
5. Submit form, it works.

Expected behavior

1. Go to https://codesandbox.io/s/form-required-drag-0uccq
2. Drag a file in the Choose file form OR click on Choose a file and select a file from the selector.
3. Submit form. It should work for both methods.

[tmorehouse]

I think I've discovered the issue that causes this. it is our drag/drop handler and how evt.preventDefault() is called

Let me try a few things to get around this.

[tmorehouse]

PR #3674 appears to fix this issue

[tmorehouse]

After playing with this a bit... (I wasn't involved with the original drag and drop handling), it is the dropzone that handles the dragged files (the label in this case), not the file input. And drag/drop bypasses the file input element events.

Will have to think of a way to set the input validity based on the dropped files (required, plus files types)

[tmorehouse]

@hkchakladar Since you are controlling state of the input (via the state prop). You can add the novalidate attribute to the form to disable native browser validation on submit, add an invalid-feedback message to b-form-group, and also apply the same state value to b-form-group for triggering the validation message to show/hide.

See https://codesandbox.io/s/form-required-drag-29onl

If you want to have the validation state / message only showing, then you can compute the validation state in the submit handler of the form.

[tmorehouse]

PR #3674 appeared to fix the issue, but has caused other side-effects.