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

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap

@@ -38434,6 +38434,7 @@ exports[`Storyshots Components|Dotcom Shell Default (footer language only) 1`] =
                           />
                         </MastheadTopNav>
                         <MastheadSearch
+                          customProfileLogin={null}
                           isSearchActive={[Function]}
                           navType="default"
                           placeHolderText="Search all of IBM"
@@ -45326,6 +45327,7 @@ exports[`Storyshots Components|Dotcom Shell Default 1`] = `
                         />
                       </MastheadTopNav>
                       <MastheadSearch
+                        customProfileLogin={null}
                         isSearchActive={[Function]}
                         navType="default"
                         placeHolderText="Search all of IBM"
@@ -51026,6 +51028,7 @@ exports[`Storyshots Components|Dotcom Shell Search open 1`] = `
                           />
                         </MastheadTopNav>
                         <MastheadSearch
+                          customProfileLogin={null}
                           isSearchActive={[Function]}
                           navType="default"
                           placeHolderText="Search all of IBM"
@@ -51066,6 +51069,7 @@ exports[`Storyshots Components|Dotcom Shell Search open 1`] = `
                                   Object {
                                     "className": "bx--header__search--input",
                                     "onChange": [Function],
+                                    "onKeyDown": [Function],
                                     "placeholder": "Search all of IBM",
                                     "value": "",
                                   }
@@ -65877,6 +65881,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer (language only) 1`
                           />
                         </MastheadTopNav>
                         <MastheadSearch
+                          customProfileLogin={null}
                           isSearchActive={[Function]}
                           navType="default"
                           placeHolderText="Search all of IBM"
@@ -71813,6 +71818,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer 1`] = `
                           />
                         </MastheadTopNav>
                         <MastheadSearch
+                          customProfileLogin={null}
                           isSearchActive={[Function]}
                           navType="default"
                           placeHolderText="Search all of IBM"
@@ -77482,6 +77488,7 @@ exports[`Storyshots Components|Dotcom Shell With platform 1`] = `
                           />
                         </MastheadTopNav>
                         <MastheadSearch
+                          customProfileLogin={null}
                           isSearchActive={[Function]}
                           navType="eco"
                           placeHolderText="Search all of IBM"
@@ -83663,6 +83670,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer (language only) 1`
                           />
                         </MastheadTopNav>
                         <MastheadSearch
+                          customProfileLogin={null}
                           isSearchActive={[Function]}
                           navType="default"
                           placeHolderText="Search all of IBM"
@@ -90621,6 +90629,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer 1`] = `
                           />
                         </MastheadTopNav>
                         <MastheadSearch
+                          customProfileLogin={null}
                           isSearchActive={[Function]}
                           navType="default"
                           placeHolderText="Search all of IBM"
@@ -113157,6 +113166,7 @@ exports[`Storyshots Components|Masthead Default 1`] = `
                       />
                     </MastheadTopNav>
                     <MastheadSearch
+                      customProfileLogin={null}
                       isSearchActive={[Function]}
                       navType="default"
                       placeHolderText="Search all of IBM"
@@ -113672,6 +113682,7 @@ exports[`Storyshots Components|Masthead Search open by default 1`] = `
                       />
                     </MastheadTopNav>
                     <MastheadSearch
+                      customProfileLogin={null}
                       isSearchActive={[Function]}
                       navType="default"
                       placeHolderText="Search all of IBM"
@@ -113712,6 +113723,7 @@ exports[`Storyshots Components|Masthead Search open by default 1`] = `
                               Object {
                                 "className": "bx--header__search--input",
                                 "onChange": [Function],
+                                "onKeyDown": [Function],
                                 "placeholder": "Search all of IBM",
                                 "value": "",
                               }
@@ -116951,6 +116963,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                         />
                       </MastheadTopNav>
                       <MastheadSearch
+                        customProfileLogin={null}
                         isSearchActive={[Function]}
                         navType="default"
                         placeHolderText="Search all of IBM"
@@ -121283,6 +121296,14 @@ exports[`Storyshots Components|Masthead With logo data 1`] = `
                     </MastheadTopNav>
                     <MastheadSearch
                       isSearchActive={[Function]}
+                      mastheadLogo={
+                        Object {
+                          "allowlist": Array [],
+                          "denylist": Array [],
+                          "end": "May 5, 2021 0:00:01",
+                          "path": "/",
+                        }
+                      }
                       navType="default"
                       placeHolderText="Search all of IBM"
                       renderValue={3}

packages/react/src/components/Masthead/Masthead.js

@@ -251,15 +251,10 @@ const Masthead = ({
                   )}
                   {hasSearch && (
                     <MastheadSearch
+                      {...mastheadProps}
                       searchOpenOnload={isSearchActive}
                       placeHolderText={placeHolderText}
                       navType={navType}
-                      {...(mastheadProps.customTypeaheadApi
-                        ? {
-                            customTypeaheadApi:
-                              mastheadProps.customTypeaheadApi,
-                          }
-                        : {})}
                       isSearchActive={handleSearchActive}
                     />
                   )}

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 = {

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 = {
 <Masthead platform={platformData} navigation="default" />;
 ```
 
+## 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
+<Masthead navigation="default" searchNoRedirect />;
+```
+
 ## customProfileLogin
 
 This allows setting a user-defined login URL. This is currently an experimental