Generate unique DOM ids for radio and checkbox groups

DOM#id now accepts optional suffixes so radio and checkbox components
produce unique ids per value (e.g. gender_male, role_ids_1). This
prevents duplicate ids in HTML and allows labels to target individual
inputs with for=.

Author: bradgessler

lib/superform/dom.rb

@@ -16,8 +16,8 @@ def value
     # Walks from the current node to the parent node, grabs the names, and seperates
     # them with a `_` for a DOM ID. One limitation of this approach is if multiple forms
     # exist on the same page, the ID may be duplicate.
-    def id
-      lineage.map(&:key).join("_")
+    def id(*suffixes)
+      (lineage.map(&:key) + suffixes).join("_")
     end
 
     # The `name` attribute of a node, which is influenced by Rails (not sure where Rails got

lib/superform/rails/components/checkbox.rb

@@ -20,7 +20,7 @@ def field_attributes
           elsif collection?
             { id: dom.id, name: dom.name, checked: true }
           else
-            { id: dom.id, name: dom.array_name, checked: Array(field.value).include?(@attributes[:value]) }
+            { id: dom.id(@attributes[:value]), name: dom.array_name, checked: Array(field.value).include?(@attributes[:value]) }
           end
         end
 

lib/superform/rails/components/radio.rb

@@ -12,7 +12,7 @@ def view_template(&)
         end
 
         def field_attributes
-          { id: dom.id, name: dom.name, value: @value, checked: field.value == @value }
+          { id: dom.id(@value), name: dom.name, value: @value, checked: field.value == @value }
         end
       end
     end

spec/superform/rails/components/checkbox_spec.rb

@@ -75,12 +75,26 @@
       expect(html).not_to match(/<input[^>]*checked[^>]*value="2"/)
     end
 
+    it 'renders unique ids per value' do
+      all_roles = [[1, "Admin"], [2, "Editor"], [3, "Viewer"]]
+      html = ""
+      all_roles.each do |id, _name|
+        html += render(described_class.new(field, value: id))
+      end
+
+      expect(html).to include('id="role_ids_1"')
+      expect(html).to include('id="role_ids_2"')
+      expect(html).to include('id="role_ids_3"')
+    end
+
     it 'works through the field helper' do
       html = render(field.checkbox(value: 1))
+      expect(html).to include('id="role_ids_1"')
       expect(html).to include('name="role_ids[]"')
       expect(html).to include('checked')
 
       html = render(field.checkbox(value: 2))
+      expect(html).to include('id="role_ids_2"')
       expect(html).to include('name="role_ids[]"')
       expect(html).not_to include('checked')
     end

spec/superform/rails/components/radio_spec.rb

@@ -7,13 +7,15 @@
   it 'renders a checked radio when value matches' do
     html = render(field.radio("male"))
     expect(html).to include('type="radio"')
+    expect(html).to include('id="gender_male"')
     expect(html).to include('name="gender"')
     expect(html).to include('value="male"')
     expect(html).to include('checked')
   end
 
   it 'renders an unchecked radio when value does not match' do
     html = render(field.radio("female"))
+    expect(html).to include('id="gender_female"')
     expect(html).to include('value="female"')
     expect(html).not_to include('checked')
   end
@@ -23,7 +25,7 @@
     expect(html).to include('class="radio-input"')
   end
 
-  it 'renders a group with correct checked state' do
+  it 'renders a group with unique ids' do
     html = ""
     ["male", "female", "other"].each do |value|
       html += render(field.radio(value))
@@ -32,6 +34,9 @@
     expect(html.scan(/type="radio"/).count).to eq(3)
     expect(html.scan(/name="gender"/).count).to eq(3)
     expect(html.scan(/checked/).count).to eq(1)
+    expect(html).to include('id="gender_male"')
+    expect(html).to include('id="gender_female"')
+    expect(html).to include('id="gender_other"')
     expect(html).to match(/<input[^>]*value="male"[^>]*checked/)
   end
 end