Use matchMedia to check if we on Desktop

By using matchedMedia we can be sure we are in a mobile or desktop view, previously we simply checked if the filter view was closed, but the state of this was not dependant on mobile or desktop.

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

@@ -60,12 +60,13 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     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 we are in desktop view
+    // Uses match media, could be further improved with an event listener
+    // as the screen size changes for example
+    var isDesktop = window.matchMedia('(min-width: 40.0625em)').matches
 
     // Check if the option select should be closed for mobile screen sizes
-    var closedForMobile = closedOnLoadMobile === 'true' && isFacetsContentHidden
+    var closedForMobile = closedOnLoadMobile === 'true' && !isDesktop
 
     // Always set the contain height to 200px for mobile screen sizes
     if (closedForMobile) {
@@ -251,32 +252,20 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     return visibleCheckboxes
   }
 
-  OptionSelect.prototype.isFacetsContainerHidden = function isFacetsContainerHidden () {
-    var facetsContent = this.$optionSelect.parentElement
-    var isFacetsContentHidden = false
-    // check whether this is hidden by progressive disclosure,
-    // because height calculations won't work
-    // would use offsetParent === null but for IE10+
-    if (facetsContent) {
-      isFacetsContentHidden = !(facetsContent.offsetWidth || facetsContent.offsetHeight || facetsContent.getClientRects().length)
-    }
-
-    return isFacetsContentHidden
-  }
-
   OptionSelect.prototype.setupHeight = function setupHeight () {
     var initialOptionContainerHeight = this.$optionsContainer.clientHeight
     var height = this.$optionList.offsetHeight
 
-    var isFacetsContainerHidden = this.isFacetsContainerHidden()
+    // Check if we are in desktop view
+    var isDesktop = window.matchMedia('(min-width: 40.0625em)').matches;
 
-    if (isFacetsContainerHidden) {
+    if (!isDesktop) {
       initialOptionContainerHeight = 200
       height = 200
     }
 
     // Resize if the list is only slightly bigger than its container
-    // If isFacetsContainerHidden is true, then 200 < 250
+    // If isDesktop is true, then 200 < 250
     // And the container height is always set to 201px
     if (height < initialOptionContainerHeight + 50) {
       this.setContainerHeight(height + 1)