[CP-3191] Fix for displaying search results in help (#2130)

libs/help/feature/src/lib/helpers/use-help-search.ts

@@ -6,19 +6,23 @@
 import { useEffect, useState } from "react"
 import { HelpSearchResult } from "help/models"
 import { helpDatabase } from "../database/help-database"
+import { cleanSearchPhrase } from "./clean-search-phrase"
 
 export const useHelpSearch = (searchPhrase?: string) => {
   const [searchResults, setSearchResults] = useState<HelpSearchResult>()
+  const { search: cleanedSearchPhrase } = cleanSearchPhrase(searchPhrase)
 
   useEffect(() => {
     void (async () => {
-      if (searchPhrase && searchPhrase?.length > 1) {
+      if (cleanedSearchPhrase && cleanedSearchPhrase?.length > 1) {
         const db = await helpDatabase
-        const searchResults = await db.search(searchPhrase)
+        const searchResults = await db.search(cleanedSearchPhrase)
         setSearchResults(searchResults)
+      } else {
+        setSearchResults(undefined)
       }
     })()
-  }, [searchPhrase])
+  }, [cleanedSearchPhrase])
 
   return searchResults
 }

libs/help/ui/src/lib/components/search-results.tsx

@@ -17,6 +17,7 @@ import { useFormContext } from "react-hook-form"
 import { IconType } from "generic-view/utils"
 import { Icon, P3 } from "generic-view/ui"
 import { HelpTestId } from "../test-ids"
+import { cleanSearchPhrase } from "help/feature"
 
 const messages = defineMessages({
   description: {
@@ -37,6 +38,7 @@ const SearchResultsFC: FunctionComponent<
 > = ({ results, phrase = "", innerRef }) => {
   const { watch, setValue } = useFormContext()
   const categories = useSelector(selectHelpCategories)
+  const { highlight: cleanedHighlightPhrase } = cleanSearchPhrase(phrase)
   const activeIndex = watch("activeResultIndex")
 
   const handleMouseEnter = (index: number) => {
@@ -64,7 +66,7 @@ const SearchResultsFC: FunctionComponent<
                     <ArticleTitle>
                       <HighlightText
                         text={result.document.title}
-                        phrase={phrase}
+                        phrase={cleanedHighlightPhrase}
                       />
                     </ArticleTitle>
                   </ListItemLink>

libs/help/ui/src/lib/components/search.tsx

@@ -14,7 +14,7 @@ import { FunctionComponent } from "Core/core/types/function-component.interface"
 import { defineMessages } from "react-intl"
 import styled, { css } from "styled-components"
 import { useFormContext } from "react-hook-form"
-import { cleanSearchPhrase, useHelpSearch } from "help/feature"
+import { useHelpSearch } from "help/feature"
 import { SearchResults, SearchResultsWrapper } from "./search-results"
 import { H3, P3, SearchInput } from "generic-view/ui"
 import { useHistory } from "react-router"
@@ -40,9 +40,7 @@ export const Search: FunctionComponent = () => {
   }>()
   const history = useHistory()
   const deferredSearchPhrase = useDeferredValue(watch("search") || "")
-  const { search: cleanedSearchPhrase, highlight: cleanedHighlightPhrase } =
-    cleanSearchPhrase(deferredSearchPhrase)
-  const results = useHelpSearch(cleanedSearchPhrase)
+  const results = useHelpSearch(deferredSearchPhrase)
   const activeResultIndex = watch("activeResultIndex")
   const searchResultsRef = useRef<HTMLDivElement>(null)
 
@@ -116,7 +114,7 @@ export const Search: FunctionComponent = () => {
       </P3>
       <InputWrapper
         onKeyDown={handleKeyDown}
-        dropdownActive={cleanedSearchPhrase.length > 1}
+        dropdownActive={deferredSearchPhrase.length > 1}
         data-testid={HelpTestId.SearchInputWrapper}
       >
         <Input
@@ -128,7 +126,7 @@ export const Search: FunctionComponent = () => {
         />
         <SearchResults
           results={results}
-          phrase={cleanedHighlightPhrase}
+          phrase={deferredSearchPhrase}
           ref={searchResultsRef}
         />
       </InputWrapper>