Recalculating ids in array on finalize causes ui to revert to previous state

[ethanfox]

The following code causes wierd behaviour when dragging items. My data functions rely on the section id to be the same as it's position in the array. How can this be solved?

The data updates correctly and if I use my refresh function to get the data from my databse it then renders correctly. I don't undertsand how only updating a value would cause the entire list to get screwed up.

	const handleSectionConsider = (e: CustomEvent<DndEvent<SectionItem>>) => {
		console.log("SECTION CONSIDERATION", e);
		filteredData = e.detail.items;
		//filteredData = [...filteredData];
		//filteredData = [...filteredData];
	};

	const handleSectionFinalize = (e: CustomEvent<DndEvent<SectionItem>>) => {
		console.log("SECTION Finalize", e);

		let newArray = [...e.detail.items]; // Shallow copy for mutation safety

		newArray.forEach((section, index) => {
			section.id = index; // Reset section indices
		});

		console.log("New Array", newArray);

		filteredData = [...newArray]; // Reassign filteredData for reactivity
		documentBody.set([...newArray]); // Ensure reactivity

		// Dispatching events with consistent data
		// dispatch("tableUpdate", {
		// 	sectionIndex: "rowDrag",
		// 	columnKey: "rowDrag",
		// 	itemIndex: "rowDrag",
		// 	updatedData: [...filteredData]
		// });
		dispatch("sectionChange", {
			updatedData: [...filteredData]
		});
	};

Area.mp4

[isaacHagoel]

Any chance you make a simple REPL reproducing the issue?

[ethanfox]

Any chance you make a simple REPL reproducing the issue?

I ended up refactoring my code to work with the ids of the items and sections rather than the index. However, I do have an issue when dragging an item into a section. Sometimes one of the existing items in a section disappears when a new item is dragged in from a different section. Should I mark this as solved and open a new issue?

[isaacHagoel]

feel free to change the title of this issue. I still need a REPL though :)