Dragged file input still shows required alert

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]

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

[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.