@ministryofjustice/hmpps-connect-dps-shared-items 3.3.2 → 3.5.0

package/dist/assets/dps/components/address-autosuggest/abortable-fetch.js

@@ -10,18 +10,26 @@ export const abortError = 'AbortError'
 export const abortTimeout = 'AbortTimeout'
 
 class AbortableFetch {
-  constructor(url) {
+  constructor(url, options) {
     this.url = url
     this.controller = new window.AbortController()
     this.status = FetchStatus.unsent
+    this.fetchDelay = options?.fetchDelay || 500
   }
 
   async send() {
     this.status = FetchStatus.loading
     try {
+      // Abortable delay before querying the API to limit the rate of requests when someone is typing:
+      await new Promise((resolve) => {
+        setTimeout(resolve, this.fetchDelay)
+        this.controller.signal.addEventListener('abort', () => { resolve() }, { once: true })
+      })
+
       setTimeout(() => {
         this.controller.abort(abortTimeout)
       }, 5000)
+
       const response = await window.fetch(this.url, { signal: this.controller.signal })
 
       if (!(+response.status === 200)) {

package/dist/assets/dps/components/address-autosuggest/autosuggest-address.js

@@ -13,6 +13,7 @@ export class AutosuggestAddress {
     this.container = context.querySelector(`.${classInputContainer}`)
     this.uprn = context.querySelector(`.${classUPRN}`)
     this.findUrl = this.container.getAttribute('data-find-url')
+    this.fetchDelay = this.container.getAttribute('data-fetch-delay')
 
     // State:
     this.fetch = null
@@ -29,7 +30,7 @@ export class AutosuggestAddress {
   }
 
   async checkAPIStatus() {
-    this.fetch = abortableFetch(`${this.findUrl}/SW1H9AJ`)
+    this.fetch = abortableFetch(`${this.findUrl}/SW1H9AJ`, { fetchDelay: this.fetchDelay })
 
     try {
       const response = await this.fetch.send()
@@ -56,7 +57,7 @@ export class AutosuggestAddress {
   }
 
   async findAddress(query) {
-    this.fetch = abortableFetch(`${this.findUrl}/${query}`)
+    this.fetch = abortableFetch(`${this.findUrl}/${query}`, { fetchDelay: this.fetchDelay })
     const data = await this.fetch.send()
     const response = await data.json()
     const status = response.status

package/dist/assets/dps/components/address-autosuggest/autosuggest-ui.js

@@ -80,6 +80,7 @@ export class AutosuggestUi {
     this.input.addEventListener('keyup', this.handleKeyup.bind(this))
     this.input.addEventListener('input', this.handleChange.bind(this))
     this.input.addEventListener('blur', this.handleBlur.bind(this))
+    this.input.addEventListener('focus', this.handleFocus.bind(this))
   }
 
   handleKeydown(event) {
@@ -144,10 +145,23 @@ export class AutosuggestUi {
     // Timeout required to allow user to click an option before clearing the listbox:
     this.blurTimeout = setTimeout(() => {
       this.blurring = false
-      this.clearListbox()
+
+      this.context.classList.remove(`${this.stylingBaseClass}${classSuffixHasResults}`)
+      this.input.removeAttribute('aria-activedescendant')
+      this.input.setAttribute('aria-expanded', false)
+      this.setAriaStatus()
     }, 300)
   }
 
+  handleFocus() {
+    if (this.listbox.innerHTML) {
+      this.context.classList.add(`${this.stylingBaseClass}${classSuffixHasResults}`)
+      this.input.addAttribute('aria-activedescendant')
+      this.input.setAttribute('aria-expanded', true)
+      this.setAriaStatus()
+    }
+  }
+
   handleScroll(option, scrollUp) {
     clearTimeout(this.scrollTimeout)
     this.scrolling = true

package/dist/assets/dps/components/address-autosuggest/macro.njk

@@ -16,6 +16,7 @@
                 data-error-api="The address search is not working right now. Enter the address manually to continue."
                 data-styling-base-class="hmpps-address-autosuggest"
                 data-find-url="{{ options.findUrl or "/api/addresses/find" }}"
+                data-fetch-delay="{{ options.fetchDelay or 500 }}"
         >
             {{ govukInput({
                 id: 'address-autosuggest-input',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ministryofjustice/hmpps-connect-dps-shared-items",
-  "version": "3.3.2",
+  "version": "3.5.0",
   "description": "A package to share Connect DPS functionality across applications",
   "main": "./dist/index.cjs",
   "module": "./dist/index.esm.js",
@@ -64,7 +64,7 @@
     "jest-junit": "^16.0.0",
     "lint-staged": "^16.2.7",
     "nock": "^14.0.10",
-    "rollup": "4.55.3",
+    "rollup": "4.56.0",
     "rollup-plugin-dts": "^6.3.0",
     "ts-jest": "^29.4.6",
     "tslib": "^2.8.1",