[Bug] Invalid file label overflows if many file extensions are supported

[MoritzLost]

Is there an existing issue for this?

• I have searched the existing issues

Have you updated FilePond and its plugins?

• I have updated FilePond and its plugins

Describe the bug

We have an input with a lot of allowed file types:

accept="application/vnd.openxmlformats-officedocument.presentationml.presentation,application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/msword,application/vnd.ms-excel,application/vnd.ms-powerpoint,application/vnd.oasis.opendocument.spreadsheet,application/vnd.oasis.opendocument.text,application/x-7z-compressed,application/gzip,application/vnd.rar,application/zip,image/bmp,image/gif,image/jpeg,image/png,image/tiff,text/csv,text/plain,application/rtf,video/mp4,video/3gpp,video/quicktime,video/x-msvideo,video/x-ms-wmv"

We use the FilePondPluginFileValidateType plugin to validate the selected document type. However, when the list of supported extensions grows too large, it overflows the item:

We can overwrite the label with a shorter error message, but there's not enough space to actually display a list of supported file types. This could be addressed by, for example, allowing the text to wrap and the item to grow vertically with the error message. Or at least to hide the overflowing content with text-overflow: ellipsis.

Reproduction

Create an input that allows a large number of file formats (see above). Create a FilePond instance with the FilePondPluginFileValidateType plugin. Drag and drop a file type that is not supported onto the FilePond instance.

Environment

- Device: Mac Mini
- OS: macOS 13.4
- Browser: Firefox Developer Edition

[rikschennink]

In these situations you can use the fileValidateTypeLabelExpectedTypes property to show a custom label.

[rikschennink]

I'll resolve the text wrapping in FilePond v5

[MoritzLost]

@rikschennink Thanks! Yeah, I've overwritten the long label with that property. Though it will be nice to be able to use longer labels, and the default value shouldn't cause layout issues.