Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dragged file input still shows required alert #3673

Closed
hkchakladar opened this issue Jul 11, 2019 · 5 comments · Fixed by #5727
Closed

Dragged file input still shows required alert #3673

hkchakladar opened this issue Jul 11, 2019 · 5 comments · Fixed by #5727

Comments

@hkchakladar
Copy link

hkchakladar commented Jul 11, 2019

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
Copy link
Member

tmorehouse commented Jul 11, 2019

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
Copy link
Member

tmorehouse commented Jul 11, 2019

PR #3674 appears to fix this issue

@tmorehouse
Copy link
Member

tmorehouse commented Jul 11, 2019

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
Copy link
Member

tmorehouse commented Jul 11, 2019

@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
Copy link
Member

tmorehouse commented Jul 12, 2019

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

@jacobmllr95 jacobmllr95 added this to To do in v2.17.0 via automation Sep 3, 2020
@jacobmllr95 jacobmllr95 moved this from To do to In progress in v2.17.0 Sep 9, 2020
v2.17.0 automation moved this from In progress to Done Sep 10, 2020
jacobmllr95 added a commit that referenced this issue Sep 10, 2020
)

* feat(b-form-file): improved drag and drop handling

* Update form-file.js

* Update form-file.js

* Further implementation

* Update form-file.spec.js

* add global `stopEvent()` util

* Improve tests

* Update form-file.spec.js

* Update form-file.js

* Update form-file.js

* Update form-file.js

* Update form-file.js

* Update common-props.json

* Update form-file.js

* Update package.json

* Update form-file.js

* Update README.md

* Update form-file.js

* Update index.d.ts

* Update README.md

* Keep current event prevent behavior

* Update form-spinbutton.js

Co-authored-by: Hiws <hiws@live.dk>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment