[refs #522] search enter key fix

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
 

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;