Fix table focus taking over auth and filter and sort (#478)

front/src/modules/ui/components/table/table-header/DropdownButton.tsx

@@ -167,7 +167,7 @@ function DropdownButton({
 
   const onButtonClick = () => {
     setIsUnfolded && setIsUnfolded(!isUnfolded);
-    setCaptureHotkeyTypeInFocus(!isUnfolded);
+    setCaptureHotkeyTypeInFocus((isPreviousUnfolded) => !isPreviousUnfolded);
   };
 
   const onOutsideClick = () => {

front/src/modules/ui/components/table/table-header/FilterDropdownButton.tsx

@@ -1,5 +1,6 @@
 import { ChangeEvent, useCallback, useState } from 'react';
 import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
 
 import {
   FilterableFieldsType,
@@ -7,6 +8,7 @@ import {
   FilterOperandType,
   SelectedFilterType,
 } from '@/filters-and-sorts/interfaces/filters/interface';
+import { captureHotkeyTypeInFocusState } from '@/hotkeys/states/captureHotkeyTypeInFocusState';
 import { SearchResultsType, useSearch } from '@/search/services/search';
 import { humanReadableDate } from '@/utils/utils';
 
@@ -31,6 +33,9 @@ export const FilterDropdownButton = <TData extends FilterableFieldsType>({
   onFilterRemove,
 }: OwnProps<TData>) => {
   const [isUnfolded, setIsUnfolded] = useState(false);
+  const [, setCaptureHotkeyTypeInFocus] = useRecoilState(
+    captureHotkeyTypeInFocusState,
+  );
 
   const [selectedEntityId, setSelectedEntityId] = useState<string | null>(null);
 
@@ -127,6 +132,7 @@ export const FilterDropdownButton = <TData extends FilterableFieldsType>({
                     operand: selectedFilterOperand,
                   });
                   setIsUnfolded(false);
+                  setCaptureHotkeyTypeInFocus(false);
                   setSelectedFilter(undefined);
                 }}
               >

front/src/modules/ui/components/table/table-header/SortDropdownButton.tsx

@@ -1,9 +1,11 @@
 import { useCallback, useState } from 'react';
+import { useRecoilState } from 'recoil';
 
 import {
   SelectedSortType,
   SortType,
 } from '@/filters-and-sorts/interfaces/sorts/interface';
+import { captureHotkeyTypeInFocusState } from '@/hotkeys/states/captureHotkeyTypeInFocusState';
 
 import DropdownButton from './DropdownButton';
 
@@ -21,6 +23,9 @@ export function SortDropdownButton<SortField>({
   onSortSelect,
 }: OwnProps<SortField>) {
   const [isUnfolded, setIsUnfolded] = useState(false);
+  const [, setCaptureHotkeyTypeInFocus] = useRecoilState(
+    captureHotkeyTypeInFocusState,
+  );
 
   const [isOptionUnfolded, setIsOptionUnfolded] = useState(false);
 
@@ -36,8 +41,9 @@ export function SortDropdownButton<SortField>({
 
   const resetState = useCallback(() => {
     setIsOptionUnfolded(false);
+    setCaptureHotkeyTypeInFocus(false);
     setSelectedSortDirection('asc');
-  }, []);
+  }, [setCaptureHotkeyTypeInFocus]);
 
   return (
     <DropdownButton
@@ -53,6 +59,7 @@ export function SortDropdownButton<SortField>({
               key={index}
               onClick={() => {
                 setSelectedSortDirection(option);
+                setCaptureHotkeyTypeInFocus(false);
                 setIsOptionUnfolded(false);
               }}
             >
@@ -73,6 +80,7 @@ export function SortDropdownButton<SortField>({
                 key={index + 1}
                 onClick={() => {
                   setIsUnfolded(false);
+                  setCaptureHotkeyTypeInFocus(false);
                   onSortItemSelect(sort);
                 }}
               >

front/src/pages/auth/Index.tsx

@@ -12,6 +12,7 @@ import { Modal } from '@/auth/components/ui/Modal';
 import { Title } from '@/auth/components/ui/Title';
 import { authFlowUserEmailState } from '@/auth/states/authFlowUserEmailState';
 import { isMockModeState } from '@/auth/states/isMockModeState';
+import { captureHotkeyTypeInFocusState } from '@/hotkeys/states/captureHotkeyTypeInFocusState';
 import { PrimaryButton } from '@/ui/components/buttons/PrimaryButton';
 import { SecondaryButton } from '@/ui/components/buttons/SecondaryButton';
 import { TextInput } from '@/ui/components/inputs/TextInput';
@@ -25,6 +26,9 @@ const StyledContentContainer = styled.div`
 `;
 
 export function Index() {
+  const [, setCaptureHotkeyTypeInFocus] = useRecoilState(
+    captureHotkeyTypeInFocusState,
+  );
   const navigate = useNavigate();
   const theme = useTheme();
   const [, setMockMode] = useRecoilState(isMockModeState);
@@ -55,7 +59,8 @@ export function Index() {
 
   useEffect(() => {
     setMockMode(true);
-  }, [navigate, setMockMode]);
+    setCaptureHotkeyTypeInFocus(true);
+  }, [navigate, setMockMode, setCaptureHotkeyTypeInFocus]);
 
   return (
     <>

front/src/pages/auth/PasswordLogin.tsx

@@ -12,6 +12,7 @@ import { Title } from '@/auth/components/ui/Title';
 import { useAuth } from '@/auth/hooks/useAuth';
 import { authFlowUserEmailState } from '@/auth/states/authFlowUserEmailState';
 import { isMockModeState } from '@/auth/states/isMockModeState';
+import { captureHotkeyTypeInFocusState } from '@/hotkeys/states/captureHotkeyTypeInFocusState';
 import { PrimaryButton } from '@/ui/components/buttons/PrimaryButton';
 import { TextInput } from '@/ui/components/inputs/TextInput';
 import { Companies } from '~/pages/companies/Companies';
@@ -37,6 +38,9 @@ const StyledErrorContainer = styled.div`
 export function PasswordLogin() {
   const navigate = useNavigate();
   const [, setMockMode] = useRecoilState(isMockModeState);
+  const [, setCaptureHotkeyTypeInFocus] = useRecoilState(
+    captureHotkeyTypeInFocusState,
+  );
 
   const prefillPassword =
     process.env.NODE_ENV === 'development' ? 'applecar2025' : '';
@@ -53,11 +57,19 @@ export function PasswordLogin() {
     try {
       await login(authFlowUserEmail, internalPassword);
       setMockMode(false);
+      setCaptureHotkeyTypeInFocus(false);
       navigate('/');
     } catch (err: any) {
       setFormError(err.message);
     }
-  }, [authFlowUserEmail, internalPassword, login, navigate, setMockMode]);
+  }, [
+    authFlowUserEmail,
+    internalPassword,
+    login,
+    navigate,
+    setMockMode,
+    setCaptureHotkeyTypeInFocus,
+  ]);
 
   useHotkeys(
     'enter',