fix(FilterBar): search-input field reacts to value prop changes (#609)

Author: Lukas742

packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap

@@ -206,7 +206,6 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
           <ui5-input
             placeholder="Search"
             type="Text"
-            value=""
             value-state="None"
           />
         </div>
@@ -900,7 +899,6 @@ Array [
             <ui5-input
               placeholder="Search"
               type="Text"
-              value=""
               value-state="None"
             />
           </div>
@@ -1222,7 +1220,6 @@ exports[`FilterBar Toggle Filters Dialog 2`] = `
           <ui5-input
             placeholder="Search"
             type="Text"
-            value=""
             value-state="None"
           />
         </div>

packages/main/src/components/FilterBar/index.tsx

@@ -114,12 +114,13 @@ const FilterBar: FC<FilterBarPropTypes> = forwardRef((props: FilterBarPropTypes,
   const [showFilters, setShowFilters] = useState(useToolbar ? filterBarExpanded : true);
   const [mountFilters, setMountFilters] = useState(true);
   const [dialogOpen, setDialogOpen] = useState(false);
-  const [searchValue, setSearchValue] = useState('');
+  const [searchValue, setSearchValue] = useState(undefined);
   const searchRef = useRef(null);
   const filterRefs = useRef({});
   const [dialogRefs, setDialogRefs] = useState({});
   const [toggledFilters, setToggledFilters] = useState({});
   const prevVisibleInFilterBarProps = useRef({});
+  const prevSearchInputPropsValueRef = useRef();
 
   const [clearText, restoreText, showFilterBarText, hideFilterBarText, goText, filtersText] = useI18nText(
     '@ui5/webcomponents-react',
@@ -308,6 +309,18 @@ const FilterBar: FC<FilterBarPropTypes> = forwardRef((props: FilterBarPropTypes,
     cssClasses.put(className);
   }
 
+  useEffect(() => {
+    prevSearchInputPropsValueRef.current = search?.props?.value;
+  }, [search?.props?.value]);
+
+  const prevSearchInputPropsValue = prevSearchInputPropsValueRef.current;
+
+  useEffect(() => {
+    if (prevSearchInputPropsValue !== search?.props?.value) {
+      setSearchValue(search?.props?.value);
+    }
+  }, [prevSearchInputPropsValue, search?.props?.value]);
+
   return (
     <>
       {dialogOpen && showFilterConfiguration && (

packages/main/src/components/FilterBar/utils.tsx

@@ -34,5 +34,5 @@ export const filterValue = (ref, child) => {
 };
 
 export const renderSearchWithValue = (renderSearchElement, searchValue) => {
-  return cloneElement(renderSearchElement, { value: searchValue });
+  return cloneElement(renderSearchElement, { value: searchValue ?? renderSearchElement?.props?.value });
 };