Vue-formulate: Repeatable group cannot be removed if a field has been clicked once when validation is true on a fresh page

[titusdecali]

Describe the bug
Clicking a single input within a repeatable group, not inputting anything, then trying to remove it (when validation is active) results in the user not being able to remove the group. This only seems to happen the first time the user loads the page and clicks a field, then tries to remove a group.

To Reproduce

1. Make a repeatable group (copy/paste from docs) and ensure validation="required"
2. Click any field within the repeatable group
3. Click the remove group X button
4. Notice that the group will not be removed until the user conforms with the validation error, then clicks the X button again.

However, this is only true on a fresh page load. If you conform to validation, remove a group, then add a group and try it again, it will work as expected (allowing removal of a group regardless of validation errors)

Issue in action

PS: repeatable groups are an AMAZING feature you added. They saved me a ton of time on my current project, and I'm glad I could contribute KO translations as I'm now using them myself on this project.

[titusdecali]

After some testing, it appears that this is actually related to preventing the first group from being deleted and has nothing to do with the validation. Perhaps this is expected functionality, however it seemed a bit strange to me from a UX perspective since the user can delete it after they've added in some text.

[mjlehrke]

I can confirm this issue. And that it happens only on a fresh page load. I noticed that if you leave the first field empty so it fails validation, then click the button to add another group that it actually clears the validation error on the first input. After this, it lets you delete the first field. I agree it seems to be related to preventing the deletion of the first input in a group.

[justin-schroeder]

Yeah, agreed. The UX on this needs some love. You can however avoid this behavior by pre-seeding the field with an array value:

<FormulateInput
  type="group"
  :value="[{}]"
>
  <span>Repeat me</span>
</FormulateGroup>

The issue is that when the value is truly empty, we emulate a value being assigned, but there is no actual model to operate against when you hit "remove" so effectively its in the same state (empty) so it receives the same result (empty). But this is totally something we should solve.

[andrew-boyd]

This may be worthy of a note in the docs until we’re able to fix.

[titusdecali]

I'll use this workaround for now. Thanks for your always-quick response! ^^

[titusdecali]

While fixing this bug, you might consider adding a minimum prop similar to the limit prop which will not allow deletion of a minimum number of repeatable group items. This isn't something I directly need, but I can think of quite a few cases where this would be useful. I could make a feature request separately if you like.

[justin-schroeder]

💯 Great suggestion @titusdecali. I might also add a sortable prop that adds little up/down arrows above or below the remove button.

[justin-schroeder]

This has been fixed in 2.4.3 and a minimum prop has been added too.