Ability to add attributes to select option

CHANGELOG.md

@@ -141,11 +141,12 @@
 
   ([PR #960](https://github.com/alphagov/govuk-frontend/pull/960))
 
-- Pull Request Title goes here
+- Allow attributes on select items
 
-  Description goes here (optional)
+  You can now provide attributes on select items
+  `attributes: { 'data-attribute': 'value' }`
 
-  ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
+  ([PR #977](https://github.com/alphagov/govuk-frontend/pull/977))
 
 🔧 Fixes:
 

src/components/select/README.md

@@ -355,6 +355,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">item.attributes</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to the select option tag.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">label</th>
 
 <td class="govuk-table__cell ">object</td>

src/components/select/README.njk

@@ -128,6 +128,20 @@ The HTML <code>&lt;select&gt;</code> element represents a control that provides
         text: 'Sets the option item as disabled.'
       }
     ],
+    [
+      {
+        text: 'item.attributes'
+      },
+      {
+        text: 'object'
+      },
+      {
+        text: 'No'
+      },
+      {
+        text: 'Any extra HTML attributes (for example data attributes) to the select option tag.'
+      }
+    ],
     [
       {
         text: 'label'

src/components/select/template.njk

@@ -38,7 +38,10 @@
   <select class="govuk-select
     {%- if params.classes %} {{ params.classes }}{% endif %}{%- if params.errorMessage %} govuk-select--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {% for item in params.items %}
-    <option value="{{ item.value }}"{{" selected" if item.selected}}{{" disabled" if item.disabled}}>{{ item.text }}</option>
+    <option value="{{ item.value }}"
+      {{-" selected" if item.selected }}
+      {{-" disabled" if item.disabled }}
+      {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>{{ item.text }}</option>
   {% endfor %}
   </select>
 </div>

src/components/select/template.test.js

@@ -151,6 +151,40 @@ describe('Select', () => {
     })
   })
 
+  describe('when they include option attributes', () => {
+    it('renders the option attributes', () => {
+      const $ = render('select', {
+        value: '2',
+        items: [
+          {
+            text: 'Option 1',
+            attributes: {
+              'data-attribute': 'ABC',
+              'data-second-attribute': 'DEF'
+            }
+          },
+          {
+            text: 'Options 2',
+            attributes: {
+              'data-attribute': 'GHI',
+              'data-second-attribute': 'JKL'
+            }
+          }
+        ]
+      })
+
+      const $component = $('.govuk-select')
+
+      const $firstInput = $component.find('option:first-child')
+      expect($firstInput.attr('data-attribute')).toEqual('ABC')
+      expect($firstInput.attr('data-second-attribute')).toEqual('DEF')
+
+      const $secondInput = $component.find('option:last-child')
+      expect($secondInput.attr('data-attribute')).toEqual('GHI')
+      expect($secondInput.attr('data-second-attribute')).toEqual('JKL')
+    })
+  })
+
   describe('when it includes a hint', () => {
     it('renders the hint', () => {
       const $ = render('select', {