Add button to queryselector and a fallback if button element is not p…

…resent (#413)
digitalnsw · Jun 12, 2024 · b833b55 · b833b55
1 parent 4e3933e
commit b833b55
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/src/components/header/header.js b/src/components/header/header.js
@@ -1,18 +1,19 @@
 class SiteSearch {
   constructor(element) {
-    this.triggerButton = element
+    this.element = element
     this.originalButton = document.querySelector('.js-open-search')
-    this.targetElement = document.getElementById(this.triggerButton.getAttribute('aria-controls'))
-    this.searchInput = this.targetElement.querySelector('.js-search-input')
-    this.pressed = this.triggerButton.getAttribute('aria-expanded') === 'true'
+    this.targetElement = document.getElementById(this.element.getAttribute('aria-controls'))
+    this.searchInput = this.targetElement.querySelector('input.js-search-input')
+    this.pressed = this.element.getAttribute('aria-expanded') === 'true'
   }
 
   init() {
+    if (!this.originalButton) return
     this.controls()
   }
 
   controls() {
-    this.triggerButton.addEventListener('click', this.showHide.bind(this), false)
+    this.element.addEventListener('click', this.showHide.bind(this), false)
   }
 
   showHide() {

diff --git a/src/main.js b/src/main.js
@@ -41,7 +41,7 @@ function initSite() {
   const accordions = document.querySelectorAll('.js-accordion')
   const backTop = document.querySelectorAll('button.js-back-to-top')
   const carousel = document.querySelectorAll('.js-carousel')
-  const closeSearchButton = document.querySelectorAll('.js-close-search')
+  const closeSearchButton = document.querySelectorAll('button.js-close-search')
   const datePicker = document.querySelectorAll('.js-date-input')
   const dialogs = document.querySelectorAll('.js-dialog')
   const fileUpload = document.querySelectorAll('.js-file-upload')
@@ -50,7 +50,7 @@ function initSite() {
   const link = document.querySelectorAll('a.js-link')
   const multiSelect = document.querySelectorAll('.js-multi-select')
   const navigation = document.getElementById('main-nav')
-  const openSearchButton = document.querySelectorAll('.js-open-search')
+  const openSearchButton = document.querySelectorAll('button.js-open-search')
   const popover = document.querySelectorAll('.js-popover')
   const tabs = document.querySelectorAll('.js-tabs')
   const toggletip = document.querySelectorAll('.js-toggletip')