Fix gitlab_ui_checkbox_component when { multiple: true }

What does this MR do and why?

This fix is needed for !80131 (merged) as part of gitlab-org/growth/team-tasks#461 (closed)

When { multiple: true } option is passed to check_box it suffixes the input's id attribute value with checked_value. For example:

-# checked_value = "dog"
= f.check_box(:pets, { multiple: true}, 'dog')

=> <input type="checkbox" id="user_pets_dog" name="user[pets][]" value="dog" />

Previous implementation does not pass in a value parameter to generic_label so the resulting <label /> has the incorrect for attribute value. This makes the resulting checkboxes un-checkable since the labels are not properly matched with the right inputs.

= f.gitlab_ui_checkbox_component(:pets, 'Dog', checked_value: 'dog', checkbox_options: { multiple: true})

=> -# input's id and label's for do not match
   <input type="checkbox" id="user_pets_dog" name="user[pets][]" value="dog" />
   <label for="user_pets">Dog</label>

This MR updates gitlab_ui_checkbox_component such that when { multiple: true } is passed in as one of checkbox_options we pass in checked_value as value param to generic_label to create <label />s with correct for attribute values.

Screenshots or screen recordings

before after
Screen_Recording_2022-02-09_at_10.16.34_AM Screen_Recording_2022-02-09_at_10.14.36_AM

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Eugie Limpin

Merge request reports

Loading