fix: (multi-select) add idPrefix option to allow multiple multi-selec…

…ts on the same page (#930)
ministryofjustice · Dec 10, 2024 · 457265f · 457265f
1 parent fa086c2
commit 457265f
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 8 deletions.
diff --git a/docs/examples/multi-select/index.njk b/docs/examples/multi-select/index.njk
@@ -4,7 +4,7 @@ title: Multi select (example)
 figma_link: https://www.figma.com/file/N2xqOFkyehXwcD9DxU1gEq/MoJ-Figma-Kit?type=design&node-id=841-220&mode=design
 ---
 
-<table class="govuk-table" data-module="moj-multi-select" data-multi-select-checkbox="#select-all">
+<table class="govuk-table" data-module="moj-multi-select" data-multi-select-checkbox="#select-all" data-multi-select-idprefix="mountains-">
   <thead class="govuk-table__head">
     <tr class="govuk-table__row">
       <th class="govuk-table__header" scope="col" id="select-all"></th>

diff --git a/src/moj/all.js b/src/moj/all.js
@@ -15,7 +15,8 @@ MOJFrontend.initAll = function (options) {
   MOJFrontend.nodeListForEach($multiSelects, function ($multiSelect) {
     new MOJFrontend.MultiSelect({
       container: $multiSelect.querySelector($multiSelect.getAttribute('data-multi-select-checkbox')),
-      checkboxes: $multiSelect.querySelectorAll('tbody .govuk-checkboxes__input')
+      checkboxes: $multiSelect.querySelectorAll('tbody .govuk-checkboxes__input'),
+      id_prefix: $multiSelect.getAttribute('data-multi-select-idprefix'),
     });
   });
 

diff --git a/src/moj/components/multi-select/README.md b/src/moj/components/multi-select/README.md
@@ -1,3 +1,3 @@
 # Table multi-select
 
-- [Guidance](https://design-patterns.service.justice.gov.uk/components/table-multi-select)
+- [Guidance](https://design-patterns.service.justice.gov.uk/components/multi-select/)
diff --git a/src/moj/components/multi-select/multi-select.js b/src/moj/components/multi-select/multi-select.js
@@ -7,7 +7,13 @@ MOJFrontend.MultiSelect = function(options) {
 
   this.container.data('moj-multi-select-initialised', true);
 
-  this.toggle = $(this.getToggleHtml());
+  const idPrefix = options.id_prefix;
+  let allId = 'checkboxes-all';
+  if (typeof idPrefix !== 'undefined') {
+    allId = idPrefix + 'checkboxes-all';
+  }
+
+  this.toggle = $(this.getToggleHtml(allId));
   this.toggleButton = this.toggle.find('input');
   this.toggleButton.on('click', $.proxy(this, 'onButtonClick'));
   this.container.append(this.toggle);
@@ -16,11 +22,11 @@ MOJFrontend.MultiSelect = function(options) {
   this.checked = options.checked || false;
 };
 
-MOJFrontend.MultiSelect.prototype.getToggleHtml = function() {
-  var html = '';
+MOJFrontend.MultiSelect.prototype.getToggleHtml = function (allId) {
+  let html = '';
   html += '<div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">';
-  html += '  <input type="checkbox" class="govuk-checkboxes__input" id="checkboxes-all">';
-  html += '  <label class="govuk-label govuk-checkboxes__label moj-multi-select__toggle-label" for="checkboxes-all">';
+  html += `  <input type="checkbox" class="govuk-checkboxes__input" id="${allId}">`;
+  html += `  <label class="govuk-label govuk-checkboxes__label moj-multi-select__toggle-label" for="${allId}">`;
   html += '    <span class="govuk-visually-hidden">Select all</span>';
   html += '  </label>';
   html += '</div>';