Single checkbox label has no "for" attribute and input has no id
McGern opened this issue · comments
Thanks, this is great library, but noticed that when a single checkbox is rendered, there is no "for" attribute, meaning that label can't be clicked to toggle the checkbox state. When using "selectboxes" (i.e. multiple checkboxes) it works fine.
Assume latest version, because it's happening in the live form builder demo and the example pages - showing as v5.0.0-rc.27
example 1
- Go to the form builder https://formio.github.io/formio.js/app/builder.html
- Add a "Checkbox" field and save without making any changes
- Go down to the rendered form
- Clicking the label doesn't toggle the checkbox
example 2
- Go to the kitchen sink demo page https://formio.github.io/formio.js/app/examples/kitchen.html
- Scroll down to the checkbox examples towards the bottom of the page, where there is a single checkbox above the multiple checkboxes (with the drink preferences)
- Single checkbox label doesn't toggle, but the multi checkbox label does
- Viewing the rendered markup, there is no "for" attribute generated for the single checkbox, but there is a "for" and "id" for the multi checkbox
Thank you for reporting this issue. I am able to reproduce and have logged a ticket for the backlog (FIO-8199). We are always willing to review any contributions to resolve this issue from the open source community.
This worked for me.
Templates.current = {
checkbox: {
form: (ctx: any) => {
const inputId = `${ctx.id}-${ctx.key}`
const input = `
<input
ref="input"
class="form-check-input"
type="checkbox"
id="${inputId}"
>
`;
const label = `
<label class="${ctx.input.labelClass} form-check-label" for="${inputId}">
<span>${ctx.component.label}</span>
</label>
`;
return `
<div class="form-check">
${input}
${label}
</div>
`
}
}
};
Resolved here: #5581
Nice.
Any chance of seeing this in 5x.rc version anytime soon?
I expect so at least in the next month.