Reorderable Builder with FileUpload block: Save changes/Create button stuck on Uploading file if order was changed first

[jmcondeprol]

Package

filament/filament

Package Version

v3.2

Laravel Version

v11

Livewire Version

No response

PHP Version

PHP 8.2

Problem description

I have a PostResource with a form Builder component, blocks can be reorderable with buttons only, and has two simple blocks: a paragraph and an image with a FileUpload. If I upload the images without altering the order of the block everything goes fine, the Save changes button of the form shows Uploading file and then changes back to Save changes. But if I upload an image after moving that block up or down, the Save changes button gets stuck on Uploading file. I guess a problem with the indexes.

Expected behavior

If the user uploads a file on a Builder block after changing its order, the Save changes button of the form goes back to its default state after showing Uploading file.

Steps to reproduce

On a form schema, add a reorderable (with buttons only in my case; not sure if this is relevant) Builder component with a block that has a FileUpload. In the UI, add to blocks to the Builder, move one up or down, and then upload a file on that one.

Reproduction repository

https://github.com/jmcondeprol/filament-reorderable-builder-bug.git

Relevant log output

No response

[wize-wiz]

@jmcondeprol I can confirm the problem.

Probably has nothing to do with index. Reference to this.pond in const handleFileProcessing located in file-upload.js is lost (null) while component states changes after reorder.

filament/packages/forms/resources/js/components/file-upload.js

Lines 284 to 300 in 2f5ac60

	const handleFileProcessing = async () => {
	if (
	this.pond
	.getFiles()
	.filter(
	(file) =>
	file.status ===
	FilePond.FileStatus.PROCESSING ||
	file.status ===
	FilePond.FileStatus.PROCESSING_QUEUED,
	).length
	) {
	return
	}
	this.dispatchFormEvent('form-processing-finished')
	}

therefor this.dispatchFormEvent('form-processing-finished') is never reached.

[wize-wiz]

Removing the additional this.pond = null in the destroy method keeps the reference.

filament/packages/forms/resources/js/components/file-upload.js

Lines 309 to 314 in 2f5ac60

	destroy: function () {
	this.destroyEditor()
	FilePond.destroy(this.$refs.input)
	this.pond = null
	},

Using FilePond.destroy from its source should be enough.

Though I think the overall implementation using sortablejs should be reviewed in general.