fix(ga): issue #606 - update unit test and code

Author: eouin

packages/webapp/src/webview/ui/components/Header/SearchField/SearchField.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
 import { UISearchBox } from '@sap-ux/ui-components';
+import type { ISearchBox } from '@fluentui/react';
 
 import { fetchTreesData } from '../../../../features/Trees/Trees.utils';
 import { useAppSelector } from '../../../../state/hooks';
@@ -26,28 +26,42 @@ export const SearchField: React.FC = (): JSX.Element => {
     const activeSearch: string = useAppSelector(getSearchQuery);
 
     const [searchTerm, setSearchTerm] = useState<string>(activeSearch);
-    const [uuidKey, setUuidKey] = useState<any>(uuidv4);
+
+    let searchInputRef: React.RefObject<ISearchBox>;
+
+    const getSearchInputRef = (): React.RefObject<ISearchBox> => {
+        searchInputRef = React.createRef();
+        return searchInputRef;
+    };
 
     const onClear = (): void => {
         if (activeSearch !== '') {
-            actions.setQueryValue('');
+            setSearchTerm('');
+
+            if (searchInputRef?.current) {
+                searchInputRef?.current.focus();
+            }
         }
     };
 
     const onSearch = (searchItem: string): void => {
         if (!/\S/.test(searchItem)) {
             searchItem = '';
+        } else {
+            searchItem = searchItem.trim();
         }
+
         if (activeSearch !== searchItem) {
             actions.setQueryValue(searchItem);
+        } else {
+            setSearchTerm(searchItem);
         }
     };
 
     useEffect(() => {
         if (activeScreen === 'HOME' && activeSearch === '') {
             setSearchTerm('');
-            setUuidKey(uuidv4);
-        } else if (activeSearch !== searchTerm) {
+        } else {
             setSearchTerm(activeSearch);
             fetchTreesData(
                 activeSearch,
@@ -64,13 +78,15 @@ export const SearchField: React.FC = (): JSX.Element => {
     }, [activeSearch]);
 
     return (
-        <div className="guided-answer__header__searchField" id="search-field-container" key={uuidKey}>
+        <div className="guided-answer__header__searchField" id="search-field-container">
             <UISearchBox
+                componentRef={getSearchInputRef()}
                 className="tree-search-field"
-                defaultValue={searchTerm}
+                value={searchTerm}
                 readOnly={networkStatus === 'LOADING'}
                 placeholder="Search Guided Answers"
                 id="search-field"
+                onChange={(e, t) => setSearchTerm(t ?? '')}
                 onClear={onClear}
                 onSearch={onSearch}></UISearchBox>
             {activeScreen === 'SEARCH' && <Filters />}