-
Notifications
You must be signed in to change notification settings - Fork 246
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Radio box does not work correctly inside repeater field #434
Comments
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 |
@justin-schroeder What if you add a |
@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. |
@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. |
@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? |
@justin-schroeder is their any updates about this issue, I'm currently facing the same issue, thank you 💯 |
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) |
I've noticed that the
While this is logical, it's not actually a true representation of the What should actually happen is that Is there a way around this? |
@JackEdwardLyons How do you define the index? If the :key // 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 |
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?
|
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.
The text was updated successfully, but these errors were encountered: