Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(masthead-search): react searchNoRedirect prop doesn't work on enter #8516

Merged
merged 5 commits into from
Mar 16, 2022
Merged

fix(masthead-search): react searchNoRedirect prop doesn't work on enter #8516

Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6bef5f7
fix(masthead-search): react searchNoRedirect prop doesn't work on enter
Mar 16, 2022
938ed94
Merge branch 'main' into fix/masthead-search-react-enter
ariellalgilmore Mar 16, 2022
e431912
fix(masthead-search): update snapshot
Mar 16, 2022
6bfc393
fix(masthead-search): add break
Mar 16, 2022
52e974e
Update Masthead.stories.js
ariellalgilmore Mar 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions packages/react/src/components/Masthead/MastheadSearch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*
Expand All @@ -296,6 +317,7 @@ const MastheadSearch = forwardRef(
placeholder: placeHolderText,
value: state.val,
onChange,
onKeyDown,
className: `${prefix}--header__search--input`,
'aria-label': placeHolderText,
role: 'combobox',
Expand Down