FileUpload Component Overlapping Next Element When Accepting Multiple Files

[izzudin96]

Package

filament/filament

Package Version

3.2.96

Laravel Version

10.48.17

Livewire Version

3.5.4

PHP Version

8.2.16

Problem description

When setting up forms with the FileUpload component to accept more than one file, the next input field becomes unclickable. This issue occurs because the FileUpload component has a transparent element that extends over the subsequent input field, blocking interactions.

Expected behavior

The next input field (e.g., a checkbox) after the FileUpload component should remain fully clickable and interactable regardless of the FileUpload settings.

Steps to reproduce

1. Create a form.
2. Add a FileUpload component to the form and configure it to accept multiple files.
3. Add an input field, such as a checkbox, immediately after the FileUpload component.
4. Attempt to interact with the checkbox.

Reproduction repository (issue will be closed if this is not valid)

https://github.com/izzudin96/filament-a11y

Relevant log output

No response

Donate 💰 to fund this issue

• You can donate funding to this issue. We receive the money once the issue is completed & confirmed by you.
• 100% of the funding will be distributed between the Filament core team to run all aspects of the project.
• Thank you in advance for helping us make maintenance sustainable!

[MansourM]

also experiencing this issue, am using form and action button as standalone components and outside of a filament resource/page

element overlap was caused by transform:translate3d(0px,67px,0px) on filepond--list--scroller which is to put image list after the dropzone (the place you can click/drag to upload)

fixed it by manually setting an style attribute to add overflow=hidden, not sure what's the best approach or why that element needed space after the images that caused this overlap, but this fixed it