Form removeListItem does not reset dirty status if first item is removed

[noahsb]

What package has an issue

@mantine/form

Describe the bug

When using form.removeListItem, removing any item in the array (except for the first) will correctly show that the removed index is not dirty.

form.removeListItem('fruit.1.name'), form.isDirty('fruit.1.name') --> false will not show as dirty because the fruit at fruit.2.name replaced it.

However, removing the first item in the list will show the form as dirty:

form.removeListItem('fruit.0.name'), form.isDirty('fruit.0.name') --> true even when fruit.1.name was not dirty before it got reordered to fruit.0.name

Maybe this is the intended behavior, but I would expect that regardless of which list item is removed, the dirty status of other items in the array are preserved

What version of @mantine/hooks page do you have in package.json?

6.0.9

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/jolly-keller-0lhuhj?file=/src/App.tsx

Do you know how to fix the issue

None

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

No response

[lgaspari]

Hey @noahsb, how's it going? I've looked into this issue as well as the codesandbox you've shared and I don't think there's a bug unless I had understand it completely wrong 😂

You're trying to check whether a list item is dirty or not based on its index, right? That seems alright for a single item, but for multiple items does not. If you consider the following line:

const remainingFruits = Array.from(Array(form.values.fruits.length).keys());

This way, you're taking the fruits' length from the form.values, which is going to change over and over as long as you add/remove items from the list. IMO it doesn't seem like a good idea to achieve the comparison you're looking for.

However, what if you used the original array to compare instead?

const fruits = [
  { id: 1, name: "banana" },
  { id: 2, name: "strawberry" }
];

...

const allFruits = Array.from(Array(fruits.length).keys());
const someFruitsAreDirty = allFruits.some((fruit) =>
  form.isDirty(`fruits.${fruit}.name`)
);

That's quite better, because fruits order shouldn't change, therefore indexes (keys) will remain as-is, and the comparison should work as expected.

Give it a try and let me know https://codesandbox.io/s/epic-solomon-l29ifd :)

PS: if that's not what you were expecting, would you be so kind of sharing a further example? Thanks!

[noahsb]

Hey @lgaspari, thanks for your detailed response! Unfortunately, that doesn't work for me.

It's quite possible this isn't a bug (and I don't think it is). I'd just like to understand what the intended behavior is for dirty and touched status in form lists. Right now, removing a list item in the form causes other untouched, non-dirty fields to become dirty because of the form fields reordering. This makes perfect sense to me why this would occur (because the fields are now different in comparison to the forms initial values).

But I can also picture a scenario where say the 3rd input in a form is NOT touched even when the 2nd input was deleted and the form fields shuffled