diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap index 551066fb5f5..98a6d67d6ce 100644 --- a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap +++ b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap @@ -52871,6 +52871,7 @@ exports[`Storyshots Components|Dotcom shell Search open 1`] = ` "aria-label": "Search all of IBM", "className": "bx--header__search--input", "onChange": [Function], + "onKeyDown": [Function], "placeholder": "Search all of IBM", "role": "combobox", "value": "", @@ -123771,6 +123772,7 @@ exports[`Storyshots Components|Masthead Search open onload 1`] = ` "aria-label": "Search all of IBM", "className": "bx--header__search--input", "onChange": [Function], + "onKeyDown": [Function], "placeholder": "Search all of IBM", "role": "combobox", "value": "", diff --git a/packages/react/src/components/Masthead/MastheadSearch.js b/packages/react/src/components/Masthead/MastheadSearch.js index 87fe1cbe575..03bf628832a 100755 --- a/packages/react/src/components/Masthead/MastheadSearch.js +++ b/packages/react/src/components/Masthead/MastheadSearch.js @@ -270,6 +270,27 @@ const MastheadSearch = forwardRef( event.currentTarget.dispatchEvent(onSearchNoRedirect); } + /** + * Custom onKeyDown event handlers + * + * @param {event} event The callback event + */ + function onKeyDown(event) { + switch (event.key) { + case 'Enter': { + // Disables Enter key if searchNoRirect is true + if (rest.searchNoRedirect) { + onSearchNoRedirect(event, state.val); + event.preventDefault(); + } + // Disable search on enter key if the search field is empty + if (!state.val) { + event.preventDefault(); + } + } + } + } + /** * When the input field changes, we set the new val to our state * @@ -296,6 +317,7 @@ const MastheadSearch = forwardRef( placeholder: placeHolderText, value: state.val, onChange, + onKeyDown, className: `${prefix}--header__search--input`, 'aria-label': placeHolderText, role: 'combobox',