filedrop-svelte icon indicating copy to clipboard operation
filedrop-svelte copied to clipboard

No way to disable the keydown-listener (space / enter key)

Open IsAvaible opened this issue 2 years ago • 7 comments

Problem The current configuration options do not allow disabling the keydown listener for the space and enter key. The only way to achieve this so far is to set the dropzone to disabled, which for obvious reasons does not lead to the desired result. Proposed Solution Therefore, I suggest adding a configuration option called "spaceToUpload" / "enterToUpload" / "keyDownToUpload" which can be set to false.

Edit: After digging through the code, I found an undocumented way to remove the keydown listener: hideInput and clickToUpload must both be set to false.

IsAvaible avatar May 17 '22 16:05 IsAvaible

Those are native to the file input. Are you sure you want to disable them? You'll be blowing your accessibility out the water if you do.

chanced avatar May 17 '22 19:05 chanced

I use the dropzone as a wrapper around a profile card editor, which allows the user to drop images anywhere on the card. Users can also click the profile image itself (or navigate to it with the tab key) instead to select an image with the native file picker. Since the text in the card is also editable, the dropzone's keydown event counteracts the user's ability to input spaces or new lines. Edit: I should add that the avatar integrates its own <input/> for adding files, the dropzone is an addition to it.

Card Design: image Click event on the avatar (hovering over it in the screenshot): image Drop event (anywhere) on the card (using this package): image

However, this use case may be too specific. If you decide not to introduce the configuration option, I recommend other users with the same problem to try the solution mentioned in the first comment.

IsAvaible avatar May 17 '22 20:05 IsAvaible

I'll add it but give me a few days. I'm buried in another project at the moment.

chanced avatar May 17 '22 22:05 chanced

On second thought, if you can put together a small repl with a similar structure, such as a container that allows for dropping with an inner box element, I'll put together an alternative solution for you.

You really don't want to abandon space/enter to upload.

chanced avatar May 19 '22 15:05 chanced

Here you go: https://svelte.dev/repl/89fa80f119224ddabd5aa1735f227229?version=3.48.0 image I tried to keep it fairly minimal while maintaining the most important functions. The structure of the card as a dropzone and the avatar as an input should become evident through this.

IsAvaible avatar May 21 '22 16:05 IsAvaible

In your case, since there isn't need for a second file drop, I'd enable windowDrop and move filedrop to a different element that doesn't contain the form: https://svelte.dev/repl/dbefb0015d054676b3232c591b1254ae?version=3.48.0

This way you get accessibility and your desired functionality. If you have need for multiple file dropzones, limit the containing elements within the form.

chanced avatar May 21 '22 17:05 chanced

Had the same issue as reporter, but windowDrop does the job quite well. Thanks!

calebleungg avatar Jun 16 '22 00:06 calebleungg