Merge pull request #400 from matestack/20200311_henning_unique-names-for-radio-buttons

update form_select radio buttons to have a unique name for different …

Author: jonasjabari

app/concepts/matestack/ui/core/form/select/select.haml

@@ -26,24 +26,26 @@
   %div{id: component_id, ref: "select.multiple.#{attr_key}", "init-value": init_value}
     - if options[:options].is_a?(Hash)
       - options[:options].each do |key, value|
-        %input{@tag_attributes,
+        %input{@tag_attributes.except(:id),
+        id: id_for_option(value),
         type: :checkbox,
         "#{model_binding}": input_key,
         "@change": "inputChanged(\"#{attr_key}\")",
         "value-type": options_type,
         name: value,
         value: key}/
-        %label=value
+        %label{for: id_for_option(value)}=value
     - if options[:options].is_a?(Array)
       - options[:options].each do |value|
-        %input{@tag_attributes,
+        %input{@tag_attributes.except(:id),
+        id: id_for_option(value),
         type: :checkbox,
         "#{model_binding}": input_key,
         "@change": "inputChanged(\"#{attr_key}\")",
         "value-type": options_type,
         name: value,
         value: value}/
-        %label=value
+        %label{for: id_for_option(value)}=value
   %span{class: "errors", "v-if": error_key }
     %span{class: "error", "v-for": "error in  #{error_key}"}
       {{ error }}
@@ -53,24 +55,26 @@
   %div{id: component_id, ref: "select.#{attr_key}", "init-value": init_value}
     - if options[:options].is_a?(Hash)
       - options[:options].each do |key, value|
-        %input{@tag_attributes,
+        %input{@tag_attributes.except(:id),
         type: :radio,
+        id: id_for_option(value),
         "#{model_binding}": input_key,
         "@change": "inputChanged(\"#{attr_key}\")",
         "value-type": options_type,
-        name: value,
+        name: "#{attr_key}_#{key}",
         value: key}/
-        %label=value
+        %label{for: id_for_option(value)}=value
     - if options[:options].is_a?(Array)
       - options[:options].each do |value|
-        %input{@tag_attributes,
+        %input{@tag_attributes.except(:id),
         type: :radio,
+        id: id_for_option(value),
         "#{model_binding}": input_key,
         "@change": "inputChanged(\"#{attr_key}\")",
         "value-type": options_type,
-        name: value,
+        name: "#{attr_key}_#{value}",
         value: value}/
-        %label=value
+        %label{for: id_for_option(value)}=value
   %span{class: "errors", "v-if": error_key }
     %span{class: "error", "v-for": "error in  #{error_key}"}
       {{ error }}

app/concepts/matestack/ui/core/form/select/select.rb

@@ -3,6 +3,12 @@ class Select < Matestack::Ui::Core::Component::Static
 
     REQUIRED_KEYS = [:options]
 
+    def setup
+      if @tag_attributes[:id].nil?
+        @tag_attributes[:id] = attr_key
+      end
+    end
+
     def input_key
       'data["' + options[:key].to_s + '"]'
     end
@@ -68,6 +74,10 @@ def init_value
       end
     end
 
+    def id_for_option value
+      return "#{@tag_attributes[:id]}_#{value}"
+    end
+
 
   end
 end

spec/usage/components/form/select/radio_button_spec.rb

@@ -0,0 +1,122 @@
+require_relative "../../../../support/utils"
+include Utils
+
+class TestController < ActionController::Base
+
+  before_action :check_params
+
+  def check_params
+    expect_params(params.permit!.to_h)
+  end
+
+  def expect_params(params)
+  end
+
+end
+
+describe "Form Component", type: :feature, js: true do
+
+  before :all do
+    class FormTestController < TestController
+      def success_submit
+        render json: { message: "server says: form submitted successfully" }, status: 200
+      end
+
+      def success_submit_with_transition
+        render json: {
+          message: "server says: form submitted successfully",
+          transition_to: form_test_page_4_path(id: 42)
+        }, status: 200
+      end
+
+      def failure_submit
+        render json: {
+          message: "server says: form had errors",
+          errors: { foo: ["seems to be invalid"] }
+        }, status: 400
+      end
+    end
+
+    Rails.application.routes.append do
+      post '/success_form_test/:id', to: 'form_test#success_submit', as: 'form_select_radio_spec_success_form_test'
+      post '/success_form_test_with_transition/:id', to: 'form_test#success_submit_with_transition', as: 'form_select_radio_spec_success_form_test_with_transition'
+      post '/failure_form_test/:id', to: 'form_test#failure_submit', as: 'form_select_radio_spec_failure_form_test'
+    end
+    Rails.application.reload_routes!
+
+    class ModelFormTestController < TestController
+      def model_submit
+        @test_model = TestModel.create(model_params)
+        if @test_model.errors.any?
+          render json: {
+            message: "server says: something went wrong!",
+            errors: @test_model.errors
+          }, status: :unprocessable_entity
+        else
+          render json: {
+            message: "server says: form submitted successfully!"
+          }, status: :ok
+        end
+      end
+
+      protected
+
+      def model_params
+        params.require(:test_model).permit(:title, :description, :status, some_data: [], more_data: [])
+      end
+    end
+
+    Rails.application.routes.append do
+      post '/model_form_test', to: 'model_form_test#model_submit', as: 'form_select_radio_spec_model_form_test'
+    end
+    Rails.application.reload_routes!
+  end
+
+  before :each do
+    allow_any_instance_of(FormTestController).to receive(:expect_params)
+  end
+
+
+  describe "Radio Button" do
+
+    it "generates unique names for each radio button group and value" do
+
+      class ExamplePage < Matestack::Ui::Page
+
+        def response
+          components {
+            form form_config, :include do
+              form_select id: 'group-one-radio', key: :array_input_one, type: :radio, options: ['foo','bar']
+              form_select id: 'group-two-radio', key: :array_input_two, type: :radio, options: ['foo', 'bar']
+              form_submit do
+                button text: 'Submit me!'
+              end
+            end
+          }
+        end
+
+        def form_config
+          return {
+            for: :my_object,
+            method: :post,
+            path: :form_select_radio_spec_success_form_test_path,
+            params: {
+              id: 42
+            }
+          }
+        end
+
+      end
+
+      visit '/example'
+
+      expect(page).to have_selector('#group-one-radio_foo[name="array_input_one_foo"]')
+      expect(page).to have_selector('#group-one-radio_bar[name="array_input_one_bar"]')
+
+      expect(page).to have_selector('#group-two-radio_foo[name="array_input_two_foo"]')
+      expect(page).to have_selector('#group-two-radio_bar[name="array_input_two_bar"]')
+    end
+
+  end
+
+end