-
Notifications
You must be signed in to change notification settings - Fork 325
Open
Description
Description
I have a faux button in the drop zone to enable users to understand that there is a cta in the drop zone, however, the onclick handler is binding to my button instead of the input.
This can be resolved by moving the file input above the children render, or by attaching for={input-id} to the label. IMO preferably the former so that it just works without needing an ID
https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/forms/dropzone/Dropzone.svelte#L48
I have confirmed that with this change, the example from https://flowbite-svelte.com/docs/forms/file-input#dropzone still functions as expected: https://svelte.dev/playground/eb66de8707cb42febfa27e7934d46208?version=5.43.2
Minimal Reproduction
There is an issue with the flowbite-svelte library but the example stands:
https://svelte.dev/playground/0bdd076fc3ab4ca9acf515e806d3f421?version=5.45.2Steps to Reproduce
- Install flowbite-svelte
- Use a button inside the dropzone
- File uploads no longer trigger on click in the dropzone
Environment
System:
OS: Linux 6.6 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
CPU: (4) x64 12th Gen Intel(R) Core(TM) i9-12900K
Memory: 473.50 MB / 5.79 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 22.19.0 - /.nvm/versions/node/v22.19.0/bin/node
npm: 10.9.3 - /.nvm/versions/node/v22.19.0/bin/npm
pnpm: 9.12.3 - /.local/share/pnpm/pnpm
npmPackages:
@sveltejs/kit: ^2.47.3 => 2.47.3
flowbite: ^3.1.2 => 3.1.2
flowbite-svelte: ^1.18.1 => 1.18.1
svelte: ^5.41.3 => 5.41.3
vite: ^7.1.12 => 7.1.12Relevant Logs / Console Output
Screenshots / GIF (optional)
Additional Context (optional)
No response
Checklist
- I have searched existing issues and discussions
- I have provided a minimal and runnable reproduction
- I am using the latest version of Flowbite-Svelte
Metadata
Metadata
Assignees
Labels
No labels