diff --git a/CHANGELOG.md b/CHANGELOG.md index 543649d9b..3f9380916 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,8 +6,8 @@ - Details (Expander variant) - Fix an issue on Microsoft Edge with the sizing of the +/- icons overlapping the title of the Expander. ([Issue 508](https://github.com/nhsuk/nhsuk-frontend/issues/508)) - Footer - Added a new parameter to the nunjucks template to override the default copyright notice. ([Issue 485](https://github.com/nhsuk-frontend/issues/485)) -- Visually hidden mixin - Fixing margin issue which causes text to be read in the wrong order on VoiceOver -- Header search - Fixed the search dropdown issue ([Issue 484](https://github.com/nhsuk/nhsuk-frontend/issues/484)) +- Visually hidden mixin - Fix margin issue which causes text to be read in the wrong order on VoiceOver +- Header search - Fix issue with the search dropdown moving down the page when you scroll ([Issue 484](https://github.com/nhsuk/nhsuk-frontend/issues/484)) and handle the enter keydown event to perform search ([Issue 522](https://github.com/nhsuk/nhsuk-frontend/issues/522)) ## 2.3.0 - 23rd July 2019 diff --git a/packages/components/header/autocomplete.js b/packages/components/header/autocomplete.js index 63118f272..eefd34ace 100644 --- a/packages/components/header/autocomplete.js +++ b/packages/components/header/autocomplete.js @@ -83,33 +83,41 @@ function autocomplete(config) { } -window.addEventListener("load", function(event) { +window.addEventListener("load", function (event) { const wrap = document.querySelector('#wrap-search'); - if (wrap) { - positionsAndWidths(); - // To deal with window resizing, need to reset positioning of search results dropdown - // Use setTimeout on resize so as not to kill CPU - // https://developer.mozilla.org/en-US/docs/Web/Events/resize - window.addEventListener("resize", resizeThrottler, false); - - let resizeTimeout; - function resizeThrottler() { - // ignore resize events as long as an actualResizeHandler execution is in the queue - if ( !resizeTimeout ) { - resizeTimeout = setTimeout(function() { - resizeTimeout = null; - actualResizeHandler(); - // The actualResizeHandler will execute at a rate of 15fps - }, 66); - } - } - - function actualResizeHandler() { - positionsAndWidths(); - } + if (wrap) { + positionsAndWidths(); + // To deal with window resizing, need to reset positioning of search results dropdown + // Use setTimeout on resize so as not to kill CPU + // https://developer.mozilla.org/en-US/docs/Web/Events/resize + window.addEventListener("resize", resizeThrottler, false); + + let resizeTimeout; + + function resizeThrottler() { + // ignore resize events as long as an actualResizeHandler execution is in the queue + if (!resizeTimeout) { + resizeTimeout = setTimeout(function () { + resizeTimeout = null; + actualResizeHandler(); + // The actualResizeHandler will execute at a rate of 15fps + }, 66); + } + } + function actualResizeHandler() { + positionsAndWidths(); + } + + } + // Handle the enter keydown event to perform search + const input = document.getElementById('search'); + input.addEventListener("keyup", function (event) { + if (event.keyCode === 13) { + document.querySelector(".nhsuk-search__submit").click(); } + }); }); export default autocomplete;