From 927afbeb190bed6cfc82623a2141c8133dd79d23 Mon Sep 17 00:00:00 2001
From: eugielimpin <elimpin@gitlab.com>
Date: Tue, 8 Feb 2022 17:21:32 +0800
Subject: [PATCH] Pass value to generic_label when creating multi select
 checkboxes

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

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 tag has the incorrect for attribute
value. This makes the resulting checkboxes un-checkable.

Now, when checkbox_options is set to { multiple: true } we pass in
checked_value as value param to generic_label to create labels with
correct for attribute values.
---
 .../form_builders/gitlab_ui_form_builder.rb   |  4 +++-
 .../gitlab_ui_form_builder_spec.rb            | 23 +++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/lib/gitlab/form_builders/gitlab_ui_form_builder.rb b/lib/gitlab/form_builders/gitlab_ui_form_builder.rb
index 3f9053d4e0c94e..e8e87a864ccb84 100644
--- a/lib/gitlab/form_builders/gitlab_ui_form_builder.rb
+++ b/lib/gitlab/form_builders/gitlab_ui_form_builder.rb
@@ -16,13 +16,15 @@ def gitlab_ui_checkbox_component(
           :div,
           class: 'gl-form-checkbox custom-control custom-checkbox'
         ) do
+          value = checkbox_options[:multiple] ? checked_value : nil
+
           @template.check_box(
             @object_name,
             method,
             format_options(checkbox_options, ['custom-control-input']),
             checked_value,
             unchecked_value
-          ) + generic_label(method, label, label_options, help_text: help_text)
+          ) + generic_label(method, label, label_options, help_text: help_text, value: value)
         end
       end
 
diff --git a/spec/lib/gitlab/form_builders/gitlab_ui_form_builder_spec.rb b/spec/lib/gitlab/form_builders/gitlab_ui_form_builder_spec.rb
index e160e88487b232..a5f26a212ab66e 100644
--- a/spec/lib/gitlab/form_builders/gitlab_ui_form_builder_spec.rb
+++ b/spec/lib/gitlab/form_builders/gitlab_ui_form_builder_spec.rb
@@ -78,6 +78,29 @@
         expect(fake_template).to have_received(:label).with(:user, :view_diffs_file_by_file, { class: %w(custom-control-label label-foo-bar), object: user, value: nil })
       end
     end
+
+    context 'with checkbox_options: { multiple: true }' do
+      let(:optional_args) do
+        {
+          checkbox_options: { multiple: true },
+          checked_value: 'one',
+          unchecked_value: false
+        }
+      end
+
+      it 'renders labels with correct for attributes' do
+        expected_html = <<~EOS
+          <div class="gl-form-checkbox custom-control custom-checkbox">
+            <input class="custom-control-input" type="checkbox" value="one" name="user[view_diffs_file_by_file][]" id="user_view_diffs_file_by_file_one" />
+            <label class="custom-control-label" for="user_view_diffs_file_by_file_one">
+              Show one file at a time on merge request&#39;s Changes tab
+            </label>
+          </div>
+        EOS
+
+        expect(checkbox_html).to eq(html_strip_whitespace(expected_html))
+      end
+    end
   end
 
   describe '#gitlab_ui_radio_component' do
-- 
GitLab