@ministryofjustice/hmpps-digital-prison-reporting-frontend 3.34.1 → 3.34.2

package/dpr/assets/js/all.mjs

@@ -376,13 +376,13 @@ class DprQueryParamClass extends DprClientClass {
       } else {
         const { name } = input;
         let { value } = input;
-        let { staticOptionValue } = input;
+        let { staticOptionNameValue } = input;
         let isDateInput = input.classList.contains('moj-js-datepicker-input');
         if (isDateInput) {
           const formatted = dayjs(value, 'D/M/YYYY').format('YYYY-MM-DD');
           value = formatted !== 'Invalid Date' ? formatted : '';
         }
-        let valueToUpdate = !isDateInput && staticOptionValue ? staticOptionValue : value;
+        let valueToUpdate = !isDateInput && staticOptionNameValue ? staticOptionNameValue : value;
         if (name) this.updateQueryParam(name, valueToUpdate);
       }
     }
@@ -1009,8 +1009,8 @@ class Filters extends DprClientClass {
       const formData = new FormData(filtersForm);
       let serializedFormData = '';
       document.querySelectorAll('.autocomplete-text-input-box').forEach((input) => {
-        if(input.staticOptionValue) {
-          formData.set(input.name, input.staticOptionValue);
+        if(input.staticOptionNameValue) {
+          formData.set(input.name, input.staticOptionNameValue);
         }
       });
       formData.forEach((v, n) => {
@@ -1538,7 +1538,8 @@ class Autocomplete extends DprClientClass {
       this.getElement()
         .querySelectorAll(this.listItemsSelector)
         .forEach((item) => {
-          if (searchValue.length >= minLength && item.innerText.trim().toLowerCase().includes(searchValue)) {
+          if (searchValue.length >= minLength &&
+            this.isMatchingStaticOptionNameOrDisplayPrefix(this.getInputListButton(item), searchValue, item)) {
             item.classList.remove('autocomplete-text-input-item-hide');
           } else {
             item.classList.add('autocomplete-text-input-item-hide');
@@ -1552,6 +1553,19 @@ class Autocomplete extends DprClientClass {
     }
   }
 
+  getInputListButton(item) {
+    return item.querySelector('.autocomplete-text-input-list-button')
+  }
+
+  isMatchingStaticOptionNameOrDisplayPrefix(inputListButton, searchValue, item) {
+    return this.isStaticOptionsNamePrefix(inputListButton.dataset.staticOptionNameValue, searchValue)
+      || item.innerText.trim().toLowerCase().startsWith(searchValue)
+  }
+
+  isStaticOptionsNamePrefix(staticOptionNameValue, searchValue) {
+    return staticOptionNameValue && staticOptionNameValue.trim().toLowerCase().startsWith(searchValue)
+  }
+
   async populateOptionsDynamically(resourceEndpoint, searchValue, textInput, templateProvider) {
     try {
       const response = await fetch(resourceEndpoint.replace('{prefix}', encodeURI(searchValue)));
@@ -1575,7 +1589,7 @@ class Autocomplete extends DprClientClass {
     event.preventDefault();
     // eslint-disable-next-line no-param-reassign
     textInput.value = event.target.innerText.trim();
-    textInput.staticOptionValue = event.target.dataset.staticOptionValue;
+    textInput.staticOptionNameValue = event.target.dataset.staticOptionNameValue;
     textInput.focus();
     const changeEvent = new Event('change');
     textInput.dispatchEvent(changeEvent);

package/dpr/components/_inputs/autocomplete-text-input/view.njk

@@ -69,7 +69,7 @@
                                 classes: "govuk-button--inverse autocomplete-text-input-list-button",
                                 attributes: {
                                     "data-parent-input": options.id,
-                                    "data-static-option-value": item.value
+                                    "data-static-option-name-value": item.value
                                 }
                             }) }}
                         </li>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ministryofjustice/hmpps-digital-prison-reporting-frontend",
   "description": "The Digital Prison Reporting Frontend contains templates and code to help display data effectively in UI applications.",
-  "version": "3.34.1",
+  "version": "3.34.2",
   "main": "dpr/assets/js/all.mjs",
   "sass": "dpr/all.scss",
   "engines": {