Fixes #39018 - Fix infinite loop on job invocations page

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: 2 people

webpack/react_app/components/TargetingHosts/index.js

@@ -56,8 +56,9 @@ const WrappedTargetingHosts = () => {
     }
   }, [dispatch, intervalExists]);
 
-  // Use ref to avoid infinite loop from handleSearch depending on pagination.per_page
+  // Use refs to avoid infinite loop from handleSearch depending on pagination.per_page and searchQuery
   const perPageRef = useRef(pagination.per_page);
+  const searchQueryRef = useRef(searchQuery);
 
   const handleSearch = useCallback(
     (query, status) => {
@@ -71,11 +72,15 @@ const WrappedTargetingHosts = () => {
     [stopApiInterval]
   );
 
-  // Keep ref in sync with pagination
+  // Keep refs in sync with state
   useEffect(() => {
     perPageRef.current = pagination.per_page;
   }, [pagination.per_page]);
 
+  useEffect(() => {
+    searchQueryRef.current = searchQuery;
+  }, [searchQuery]);
+
   const handlePagination = useCallback(
     args => {
       stopApiInterval();
@@ -112,9 +117,19 @@ const WrappedTargetingHosts = () => {
     };
   }, [dispatch, apiUrl, autoRefresh, getData]);
 
+  // Only respond to external statusFilter changes (from chart clicks)
+  // searchQuery changes are handled directly by handleSearch calls from the UI
   useEffect(() => {
-    handleSearch(searchQuery, statusFilter);
-  }, [statusFilter, searchQuery, handleSearch]);
+    dispatch(stopInterval(TARGETING_HOSTS));
+    const defaultPagination = { page: 1, per_page: perPageRef.current };
+    setApiUrl(
+      getApiUrl(
+        buildSearchQuery(searchQueryRef.current, statusFilter),
+        defaultPagination
+      )
+    );
+    setPagination(defaultPagination);
+  }, [statusFilter, dispatch]);
 
   return (
     <TargetingHostsPage