From 41ba4528cd002f2bbc75e50d78d0d16668e25a0b Mon Sep 17 00:00:00 2001 From: kennylam Date: Fri, 15 Jan 2021 15:45:19 -0500 Subject: [PATCH] feat(masthead): search no redirect (#4913) ### Related Ticket(s) #4599 ### Description This adds an optional `searchNoRedirect` prop to the `Masthead` component. When used, the masthead search will no longer redirect to the default search results page. Autosuggest items will still populate, but clicking them will not trigger a redirect. Any redirect actions must be provided in the `onSearchNoRedirect` custom event. ### Changelog **New** - `searchNoRedirect` prop to `Masthead` - `onSearchNoRedirect` custom event. Emits when `searchNoRedirect` is true **Changed** - clean up `MastheadSearch` props --- .../__snapshots__/storyshots.test.js.snap | 21 +++++++ .../react/src/components/Masthead/Masthead.js | 7 +-- .../src/components/Masthead/MastheadSearch.js | 60 +++++++++++++++---- .../components/Masthead/README.stories.mdx | 17 ++++++ 4 files changed, 86 insertions(+), 19 deletions(-) diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap index a973cdb7717..4d67576bb19 100644 --- a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap +++ b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap @@ -38434,6 +38434,7 @@ exports[`Storyshots Components|Dotcom Shell Default (footer language only) 1`] = /> )} diff --git a/packages/react/src/components/Masthead/MastheadSearch.js b/packages/react/src/components/Masthead/MastheadSearch.js index 517369651b2..625db685db2 100755 --- a/packages/react/src/components/Masthead/MastheadSearch.js +++ b/packages/react/src/components/Masthead/MastheadSearch.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2020 + * Copyright IBM Corp. 2016, 2021 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -100,7 +100,6 @@ const MastheadSearch = ({ renderValue, searchOpenOnload, navType, - customTypeaheadApi, ...rest }) => { const { ref } = useSearchVisible(false); @@ -206,6 +205,21 @@ const MastheadSearch = ({ rest.isSearchActive(state.isSearchOpen); } + /** + * Custom event emitted when search does not redirect to default url + * + * @param {event} event The callback event + * @param {string} val The new val of the input + */ + function onSearchNoRedirect(event, val) { + const onSearchNoRedirect = new CustomEvent('onSearchNoRedirect', { + bubbles: true, + detail: { value: val }, + }); + + event.currentTarget.dispatchEvent(onSearchNoRedirect); + } + /** * When the input field changes, we set the new val to our state * @@ -220,10 +234,26 @@ const MastheadSearch = ({ }); event.currentTarget.dispatchEvent(onSearchValueChanged); - dispatch({ type: 'setVal', payload: { val: newValue } }); } + /** + * 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(); + } + } + } + } + /** * Autosuggest will pass through all these props to the input. * @@ -233,6 +263,7 @@ const MastheadSearch = ({ placeholder: placeHolderText, value: state.val, onChange, + onKeyDown, className: `${prefix}--header__search--input`, }; @@ -263,7 +294,11 @@ const MastheadSearch = ({ } if (state.isSearchOpen && state.val.length) { - root.parent.location.href = getRedirect(state.val); + if (rest.searchNoRedirect) { + onSearchNoRedirect(event, state.val); + } else { + root.parent.location.href = getRedirect(state.val); + } } else { dispatch({ type: 'setSearchOpen' }); } @@ -310,7 +345,6 @@ const MastheadSearch = ({ componentInputProps={componentInputProps} dispatch={dispatch} isActive={state.isSearchOpen} - searchIconClick={searchIconClick} /> ); } @@ -364,8 +398,8 @@ const MastheadSearch = ({ if (request.reason === 'input-changed') { // if the search input has changed - let response = customTypeaheadApi - ? customTypeaheadApi(searchValue) + let response = rest.customTypeaheadApi + ? rest.customTypeaheadApi(searchValue) : await SearchTypeaheadAPI.getResults(searchValue); if (response !== undefined) { @@ -400,7 +434,12 @@ const MastheadSearch = ({ * @param {string} params.suggestionValue Suggestion value */ function onSuggestionSelected(event, { suggestionValue }) { - root.parent.location.href = getRedirect(suggestionValue); + if (rest.searchNoRedirect) { + onSearchNoRedirect(event, suggestionValue); + event.preventDefault(); + } else { + root.parent.location.href = getRedirect(suggestionValue); + } } /** @@ -483,11 +522,6 @@ MastheadSearch.propTypes = { * navigation type for autoids */ navType: PropTypes.oneOf(['default', 'alt', 'eco']), - - /** - * Custom typeahead API function - */ - customTypeaheadApi: PropTypes.func, }; MastheadSearch.defaultProps = { diff --git a/packages/react/src/components/Masthead/README.stories.mdx b/packages/react/src/components/Masthead/README.stories.mdx index e56f84b0112..a7ef54ab3bd 100755 --- a/packages/react/src/components/Masthead/README.stories.mdx +++ b/packages/react/src/components/Masthead/README.stories.mdx @@ -126,6 +126,12 @@ document.addEventListener('onSearchValueChanged', e => console.log(e.detail); // { value: inputValue } // do something here ); + +// disables search redirect onClick and onEnter +document.addEventListener('onSearchNoRedirect', e => + console.log(e.detail); // { value: inputValue } + // do something here +); ``` ## Props @@ -200,6 +206,17 @@ const platformData = { ; ``` +## searchNoRedirect + +This will disable the default redirecting of the search component as well as emit +the `onSearchNoRedirect` [custom event](#custom-events). +> Note that unless a custom redirect action is +provided in the event, the search will do nothing except list search suggestions. + +```javascript +; +``` + ## customProfileLogin This allows setting a user-defined login URL. This is currently an experimental