bootstrap_form
bootstrap_form copied to clipboard
Labels don't use namespaced ids
The following code:
<%= f.check_box :role, { label: 'Volunteer', name: 'user[role]', namespace: 'volunteer' }, 'Volunteer', '' %>
Generates the following HTML:
<div class="form-check">
<input name="user[role]" type="hidden" value="">
<input name="user[role]" class="form-check-input" type="checkbox" value="Volunteer" id="volunteer_user_role">
<label class="form-check-label" for="user_role">Volunteer</label>
</div>
The for
attribute on the label does not match the check box id because it's using namespace. It should be:
<label class="form-check-label" for="volunteer_user_role">Volunteer</label>
The workaround is to explicitly specify the id instead of using namespace:
<%= f.check_box :role, { label: 'Volunteer', name: 'user[role]', id: 'volunteer_user_role' }, 'Volunteer', '' %>
I'd be happy to put together a PR to address this if you'd like!
Thanks for reporting this. Nice catch! We always welcome PRs so I'd love to see what you send us. The one thing I'd remind you is to consider how to minimize the impact to existing code, if any.
Thanks again for your contribution. I look forward to your PR.