diff --git a/app/assets/javascripts/components/option-select.js b/app/assets/javascripts/components/option-select.js index b5c7b96012..70586cd41c 100644 --- a/app/assets/javascripts/components/option-select.js +++ b/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)