fix: workflow log search input controlled state (#29930)

web/app/components/app/workflow-log/filter.spec.tsx

@@ -7,6 +7,7 @@
  * - Keyword search
  */
 
+import { useState } from 'react'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import Filter, { TIME_PERIOD_MAPPING } from './filter'
@@ -293,12 +294,21 @@ describe('Filter', () => {
       const user = userEvent.setup()
       const setQueryParams = jest.fn()
 
-      render(
+      const Wrapper = () => {
-        <Filter
+        const [queryParams, updateQueryParams] = useState<QueryParam>(createDefaultQueryParams())
-          queryParams={createDefaultQueryParams()}
+        const handleSetQueryParams = (next: QueryParam) => {
-          setQueryParams={setQueryParams}
+          updateQueryParams(next)
-        />,
+          setQueryParams(next)
-      )
+        }
+        return (
+          <Filter
+            queryParams={queryParams}
+            setQueryParams={handleSetQueryParams}
+          />
+        )
+      }
+
+      render(<Wrapper />)
 
       const input = screen.getByPlaceholderText('common.operation.search')
       await user.type(input, 'workflow')

web/app/components/app/workflow-log/filter.tsx

@@ -65,7 +65,7 @@ const Filter: FC<IFilterProps> = ({ queryParams, setQueryParams }: IFilterProps)
         wrapperClassName='w-[200px]'
         showLeftIcon
         showClearIcon
-        value={queryParams.keyword}
+        value={queryParams.keyword ?? ''}
         placeholder={t('common.operation.search')!}
         onChange={(e) => {
           setQueryParams({ ...queryParams, keyword: e.target.value })