diff --git a/frontend/src/AppBuilder/QueryPanel/QueryDataPane.jsx b/frontend/src/AppBuilder/QueryPanel/QueryDataPane.jsx index 6469601b81..9ac052ae51 100644 --- a/frontend/src/AppBuilder/QueryPanel/QueryDataPane.jsx +++ b/frontend/src/AppBuilder/QueryPanel/QueryDataPane.jsx @@ -21,20 +21,22 @@ export const QueryDataPane = ({ darkMode }) => { const { t } = useTranslation(); const loadingDataQueries = useStore((state) => state.queryPanel.loadingDataQueries); + const setQueryPanelSearchTerm = useStore((state) => state.queryPanel.setQueryPanelSearchTerm); + const storedSearchTerm = useStore((state) => state.queryPanel.queryPanelSearchTem); const dataQueries = useStore((state) => state.dataQuery.queries.modules.canvas); const dataSources = useStore((state) => state.dataSources); const [filteredQueries, setFilteredQueries] = useState(dataQueries); - const [showSearchBox, setShowSearchBox] = useState(false); + const [showSearchBox, setShowSearchBox] = useState(!!storedSearchTerm); const searchBoxRef = useRef(null); const [dataSourcesForFilters, setDataSourcesForFilters] = useState([]); - const [searchTermForFilters, setSearchTermForFilters] = useState(); - + const [searchTermForFilters, setSearchTermForFilters] = useState(storedSearchTerm ?? ''); function isDataSourceLocal(dataQuery) { return dataSources.some((dataSource) => dataSource.id === dataQuery.data_source_id); } useEffect(() => { + setQueryPanelSearchTerm(searchTermForFilters); // Create a copy of the dataQueries array to perform filtering without modifying the original data. let filteredDataQueries = [...dataQueries]; @@ -84,7 +86,7 @@ export const QueryDataPane = ({ darkMode }) => { }; useEffect(() => { - showSearchBox && searchBoxRef.current.focus(); + showSearchBox && !storedSearchTerm && searchBoxRef.current.focus(); }, [showSearchBox]); return ( @@ -135,6 +137,7 @@ export const QueryDataPane = ({ darkMode }) => { placeholder={t('globals.search', 'Search')} customClass="query-manager-search-box-wrapper flex-grow-1" showClearButton + clearTextOnBlur={false} /> ({ queryPanel: { ...initialState, + setQueryPanelSearchTerm: (searchTerm) => + set( + (state) => { + state.queryPanel.queryPanelSearchTem = searchTerm; + }, + false, + 'setQueryPanelSearchTerm' + ), setIsDraggingQueryPane: (isDraggingQueryPane) => set( (state) => { diff --git a/frontend/src/_components/SearchBox.jsx b/frontend/src/_components/SearchBox.jsx index 1e910dd519..f0c09054dc 100644 --- a/frontend/src/_components/SearchBox.jsx +++ b/frontend/src/_components/SearchBox.jsx @@ -21,6 +21,7 @@ export const SearchBox = forwardRef( autoFocus = false, showClearButton, initialValue = '', + clearTextOnBlur = true, }, ref ) => { @@ -39,7 +40,7 @@ export const SearchBox = forwardRef( }; const handleClickOutside = (event) => { - if (ref?.current && !ref.current.contains(event.target)) { + if (ref?.current && !ref.current.contains(event.target) && clearTextOnBlur) { clearSearchText(); // Your function to be triggered }