Fix dropdown resetting focus

Various dropdown (Table filters, workflow selector, pretty much
everything in the ACL tab) would
seemingly randomly have their
focus reset to the top element
every couple of seconds.
This would make them hard or even impossible to navigate by users.
This patch aims to fix that.

The culprit here is a selector hook at the app level. The `Stats`
component (the various numbers next to the "Add Event" button)
would trigger this hook about every 5 seconds, causing the
whole app to rerender and the
dropdowns to reset focus.

The proposed solution is to not use a selector. This will make our
custom hook `useTableFilterStateValidation`
effectively only run once on page load. I would argue this is fine, as
we do not expect the state to corrupt while the app is running
and thus don't need to check for corrupt state everytime the state
changes.

Author: Arnei

src/hooks/useTableFilterStateValidation.ts

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useAppDispatch, useAppSelector } from "../store";
+import store, { useAppDispatch } from "../store";
 import { resetCorruptedState } from "../slices/tableFilterSlice";
 
 /**
@@ -9,10 +9,11 @@ import { resetCorruptedState } from "../slices/tableFilterSlice";
  */
 export const useTableFilterStateValidation = () => {
 	const dispatch = useAppDispatch();
-	const tableFilters = useAppSelector(state => state.tableFilters);
 
 	useEffect(() => {
 		// Check for corrupted state and dispatch reset action if needed
+		const tableFilters = store.getState().tableFilters;
+
 		const hasCorruption =
 			!Array.isArray(tableFilters.data) ||
 			!Array.isArray(tableFilters.textFilter) ||
@@ -22,6 +23,5 @@ export const useTableFilterStateValidation = () => {
 			console.warn("Detected corrupted table filter state, resetting to defaults");
 			dispatch(resetCorruptedState());
 		}
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
+	}, [dispatch]);
 };