Add media query to toggle visibility on page load

app/assets/javascripts/components/option-select.js

@@ -15,6 +15,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.hasFilter = this.$optionSelect.getAttribute('data-filter-element') || ''
 
     this.checkedCheckboxes = []
+
+    this.mq = window.matchMedia('(min-width: 641px)')
+    this.isClosedOnLoad = this.$optionSelect.getAttribute('data-closed-on-load')
+    this.isClosedOnLoadMobile = this.$optionSelect.getAttribute('data-closed-on-load-mobile')
   }
 
   OptionSelect.prototype.init = function () {
@@ -57,25 +61,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     var button = this.$optionSelect.querySelector('.js-container-button')
     button.addEventListener('click', this.toggleOptionSelect.bind(this))
 
-    var closedOnLoad = this.$optionSelect.getAttribute('data-closed-on-load')
-    var closedOnLoadMobile = this.$optionSelect.getAttribute('data-closed-on-load-mobile')
-
-    // By default the .filter-content container is hidden on mobile
-    // By checking if .filter-content is hidden, we are in mobile view given the current implementation
-    var isFacetsContentHidden = this.isFacetsContainerHidden()
-
-    // Check if the option select should be closed for mobile screen sizes
-    var closedForMobile = closedOnLoadMobile === 'true' && isFacetsContentHidden
-
-    // Always set the contain height to 200px for mobile screen sizes
-    if (closedForMobile) {
-      this.setContainerHeight(200)
-    }
-
-    if (closedOnLoad === 'true' || closedForMobile) {
-      this.close()
+    if (this.mq.matches) {
+      this.toggleOptionVisibility(this.isClosedOnLoad)
     } else {
-      this.setupHeight()
+      this.toggleOptionVisibility(this.isClosedOnLoadMobile)
     }
 
     var checkedString = this.checkedString()
@@ -84,6 +73,14 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
   }
 
+  OptionSelect.prototype.toggleOptionVisibility = function (isClosedOnLoad) {
+    if (isClosedOnLoad === 'true') {
+      this.close()
+    } else {
+      this.setupHeight()
+    }
+  }
+
   OptionSelect.prototype.typeFilterText = function (event) {
     event.stopPropagation()
     var ENTER_KEY = 13