From 7ff8a831d51d25c59b935bd5302520a9db3b5ce9 Mon Sep 17 00:00:00 2001 From: Martin Jones Date: Mon, 17 Jun 2024 09:27:28 +0100 Subject: [PATCH] Update checkbox display from `block` to `flex` In V5 of the design system, checkboxes use flexbox, `display: flex`. In the option select component, visibility of the checkbox is set using either `display: none` or `display: block`. Setting the value to `block` caused rendering issues when focusing a checkbox item. Setting the value to `flex` aligns with the approach used in the design system and fixes the rendering issue. --- .../govuk_publishing_components/components/option-select.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/govuk_publishing_components/components/option-select.js b/app/assets/javascripts/govuk_publishing_components/components/option-select.js index 747105e331..793019a280 100644 --- a/app/assets/javascripts/govuk_publishing_components/components/option-select.js +++ b/app/assets/javascripts/govuk_publishing_components/components/option-select.js @@ -140,7 +140,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; } for (i = 0; i < showCheckboxes.length; i++) { - obj.$allCheckboxes[showCheckboxes[i]].style.display = 'block' + obj.$allCheckboxes[showCheckboxes[i]].style.display = 'flex' } var lenChecked = obj.$optionsContainer.querySelectorAll('.govuk-checkboxes__input:checked').length