Radio box does not work correctly inside repeater field

[XGhozt]

Recreation: https://codesandbox.io/s/vue-formulate-reproduction-template-forked-k5kpr?file=/src/components/Reproduction.vue

For now my solution is to use a select field instead. But the problem appears to be that the name of the field is the same for every single instance so your browser won't let you select more than one.

[justin-schroeder]

Ah yeah, that's an issue for sure — we;ve actually seen this before in our own work. The way we solved it was by using the index from the #default slot and appending it to the name of the input. Kinda hacky, but it works. I'm honestly not sure what the "right" thing to do here is. It might make sense to use formData style names with square brackets []. I'll tag this as somethign to look into doin out of the box in 3

[gazben]

@justin-schroeder What if you add a <form> tag around the input group?

[justin-schroeder]

@gazben then you have multiple forms with multiple submission events, accessibility concerns etc etc etc. I know there are some stack overflow answers that say this is a good idea but I'm less convinced. I think we need a good way to do this out of the box, not sure if we should re-map the names or maybe use synthetic radios...not sure.

[gazben]

@justin-schroeder I know it can introduce other problems, but this is just an input, and if you suppress the form tag events, it should work (this was my workaround).

But I think the most important thing here would be, to add a warning to the docs, because for repeating fields, I think this behaviour is not obvious.

[justin-schroeder]

@gazben yep, I agree should be a note in the docs about it. Would you want to submit a PR to the docs with a tip block about it?

[BennaceurHichem]

@justin-schroeder is their any updates about this issue, I'm currently facing the same issue, thank you 💯

[justin-schroeder]

No updates at the moment, but you can get around it by changing the name of the radio input in each group by concatenating the index of the group (extracted from the slot)

[JackEdwardLyons]

I've noticed that the index gets out of sync when you delete an item in between a bunch of items. For example,

• If I have an array of items with name attributes using the index ... for example ['item-1', 'item-2', 'item-3']
• If I then I go and delete item-2
• The array will then be ['item-1', 'item-3']

While this is logical, it's not actually a true representation of the index anymore. if I save this to the DB and reload the page, my data is out of sync.

What should actually happen is that item-3 changes to item-2 as soon as the item-2 is deleted.

Is there a way around this?

[rowild]

@JackEdwardLyons How do you define the index? If the :key item-xy is something that is defined on the object, then this will not change (and must not change, since it is part of the data item). If, however, a separate index is used, then the index should change...

// this (yours?)
v-for="item in items" :key="item-id"

// vs this
v-for="(item, index) in items" :key="index"
// `index` should adapt after an item has been deleted

[JackEdwardLyons]

Hey @rowild yeah I’m aware of how keys work in Vue, and I am using the index from the repeatable slot scope.

I’m actually talking about the ‘name’ attribute that you add to each formulate field. This is what I am using to track the changes in form data.

I can do a reproduction if you like?