Update filters.js (#416)

digitalnsw · Jun 12, 2024 · c6c7d35 · c6c7d35
1 parent 8c63ec3
commit c6c7d35
Showing 1 changed file with 33 additions and 29 deletions.
diff --git a/src/components/filters/filters.js b/src/components/filters/filters.js
@@ -28,11 +28,11 @@ class Filters {
     this.controlsButtonText = this.controlsButton && this.controlsButton.querySelector('span:not(.nsw-material-icons)')
     this.controlsButtonTextContent = this.controlsButton && this.controlsButtonText.innerText
     this.wrapper = this.element.querySelector(`.${this.prefix}${this.wrapperClass}`)
-    this.closeButton = this.wrapper.querySelector(`.${this.prefix}${this.closeClass} button`)
-    this.submitButton = this.wrapper.querySelector(`.${this.prefix}${this.submitClass} button`)
-    this.resetButton = this.wrapper.querySelector(`.${this.prefix}${this.resetClass} button`)
-    this.items = this.wrapper.querySelectorAll(`.${this.prefix}${this.itemClass}`)
-    this.accordionButtons = this.wrapper.querySelectorAll(`.${this.prefix}${this.itemClass}-button`)
+    this.closeButton = this.wrapper && this.wrapper.querySelector(`.${this.prefix}${this.closeClass} button`)
+    this.submitButton = this.wrapper && this.wrapper.querySelector(`.${this.prefix}${this.submitClass} button`)
+    this.resetButton = this.wrapper && this.wrapper.querySelector(`.${this.prefix}${this.resetClass} button`)
+    this.items = this.wrapper && this.wrapper.querySelectorAll(`.${this.prefix}${this.itemClass}`)
+    this.accordionButtons = this.wrapper && this.wrapper.querySelectorAll(`.${this.prefix}${this.itemClass}-button`)
     this.showMoreContent = this.element.querySelectorAll(`.${this.prefix}${this.allClass}`)
     this.showMoreButtons = this.element.querySelectorAll(`.${this.prefix}${this.moreClass}`)
     this.focusableElements = 'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'
@@ -46,22 +46,24 @@ class Filters {
   init() {
     this.element.classList.add('ready')
 
-    this.accordionButtons.forEach((button) => {
-      const buttonElem = button
-      const uID = uniqueId('collapsed')
-      buttonElem.setAttribute('type', 'button')
-      buttonElem.setAttribute('aria-expanded', 'false')
-      buttonElem.setAttribute('aria-controls', uID)
-      const label = buttonElem.querySelector(`.${this.prefix}${this.itemClass}-name`)
-      buttonElem.setAttribute('data-label', label.innerText)
-
-      const contentElem = buttonElem.nextElementSibling
-      contentElem.id = buttonElem.getAttribute('aria-controls')
-      contentElem.hidden = true
-
-      this.content.push(contentElem)
-      this.buttons.push(buttonElem)
-    })
+    if (this.accordionButtons) {
+      this.accordionButtons.forEach((button) => {
+        const buttonElem = button
+        const uID = uniqueId('collapsed')
+        buttonElem.setAttribute('type', 'button')
+        buttonElem.setAttribute('aria-expanded', 'false')
+        buttonElem.setAttribute('aria-controls', uID)
+        const label = buttonElem.querySelector(`.${this.prefix}${this.itemClass}-name`)
+        buttonElem.setAttribute('data-label', label.innerText)
+
+        const contentElem = buttonElem.nextElementSibling
+        contentElem.id = buttonElem.getAttribute('aria-controls')
+        contentElem.hidden = true
+
+        this.content.push(contentElem)
+        this.buttons.push(buttonElem)
+      })
+    }
 
     this.updateDom()
     this.initEvents()
@@ -230,14 +232,16 @@ class Filters {
 
   getOptions() {
     this.options = []
-    this.items.forEach((element) => {
-      const content = element.querySelector(`.${this.prefix}${this.itemClass}-content`)
-      const textInputs = content.querySelectorAll('input[type="text"]')
-      const singleSelects = content.querySelectorAll('select:not([multiple]):not(.nsw-display-none)')
-      const multiSelects = content.querySelectorAll('select[multiple]:not(.nsw-display-none)')
-      const checkboxes = content.querySelectorAll('input[type="checkbox"]')
-      this.options.push(...textInputs, ...singleSelects, ...checkboxes, ...multiSelects)
-    })
+    if (this.items) {
+      this.items.forEach((element) => {
+        const content = element.querySelector(`.${this.prefix}${this.itemClass}-content`)
+        const textInputs = content.querySelectorAll('input[type="text"]')
+        const singleSelects = content.querySelectorAll('select:not([multiple]):not(.nsw-display-none)')
+        const multiSelects = content.querySelectorAll('select[multiple]:not(.nsw-display-none)')
+        const checkboxes = content.querySelectorAll('input[type="checkbox"]')
+        this.options.push(...textInputs, ...singleSelects, ...checkboxes, ...multiSelects)
+      })
+    }
   }
 
   getSelected() {