diff --git a/app/assets/javascripts/components/option-select.js b/app/assets/javascripts/components/option-select.js index ccf53709d..a31e1f19f 100644 --- a/app/assets/javascripts/components/option-select.js +++ b/app/assets/javascripts/components/option-select.js @@ -61,12 +61,12 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; var button = this.$optionSelect.querySelector('.js-container-button') button.addEventListener('click', this.toggleOptionSelect.bind(this)) - // Toggle option visibility depending on screen size (min-width: 641px) - // and presence of closed options (this.isClosedOnLoadMobile, this.isClosedOnLoad) + // Toggle option visibility depending on screen size (min-width: 641px) and + // presence of any 'closed' properties (`data-closed-on-load`, `data-closed-on-load-mobile`) if (this.mq.matches) { - this.toggleOptionVisibility(this.isClosedOnLoad === 'true') + this.toggleVisibility(true) } else { - this.toggleOptionVisibility(this.hasAnyClosedOptions()) + this.toggleVisibility(false) } var checkedString = this.checkedString() @@ -75,18 +75,22 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; } } - OptionSelect.prototype.toggleOptionVisibility = function (hasClosedProperty) { - if (hasClosedProperty) { - this.close() + OptionSelect.prototype.toggleVisibility = function (isDesktop) { + if (isDesktop) { + if (this.isClosedOnLoad === 'true') { + this.close() + } else { + this.setupHeight() + } } else { - this.setupHeight() + if (this.isClosedOnLoadMobile === 'true' || this.isClosedOnLoad === 'true') { + this.close() + } else { + this.setContainerHeight(201) + } } } - OptionSelect.prototype.hasAnyClosedOptions = function () { - return this.isClosedOnLoadMobile === 'true' || this.isClosedOnLoad === 'true' - } - OptionSelect.prototype.typeFilterText = function (event) { event.stopPropagation() var ENTER_KEY = 13 @@ -277,7 +281,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; } OptionSelect.prototype.setupHeight = function setupHeight () { - // get height of option container + // get height of option container e.g. var initialOptionContainerHeight = this.$optionsContainer.clientHeight // get height of option container ul (containg items) var height = this.$optionList.offsetHeight