pl-fe: a11y: some messy code to restore focus after closing menu modal

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx

@@ -244,6 +244,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
         closeModal('DROPDOWN_MENU');
       };
       openModal('DROPDOWN_MENU', {
+        element: refs.reference.current as HTMLButtonElement,
         content: <DropdownMenuContent handleClose={handleClose} items={items} component={component} touchscreen />,
       });
     } else {
@@ -256,7 +257,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
     }
   };
 
-  const handleClose = (goBack: any = true) => {
+  const handleClose = () => {
     (refs.reference.current as HTMLButtonElement)?.focus();
 
     closeDropdownMenu();

packages/pl-fe/src/modals/dropdown-menu-modal.tsx

@@ -5,6 +5,8 @@ import { FormattedMessage } from 'react-intl';
 import type { BaseModalProps } from 'pl-fe/features/ui/components/modal-root';
 
 interface DropdownMenuModalProps {
+  /** The element initiating opening the modal. */
+  element?: HTMLElement;
   content?: JSX.Element;
 }
 

packages/pl-fe/src/stores/modals.ts

@@ -101,12 +101,22 @@ const useModalsStore = create<State>()(mutative((set) => ({
     if (state.modals.length === 0) {
       return;
     }
+    let closedModal: Record<string, any> | undefined;
     if (modalType === undefined) {
+      closedModal = state.modals[state.modals.length - 1].modalProps;
       state.modals = state.modals.slice(0, -1);
     } else if (state.modals.some((modal) => modalType === modal.modalType)) {
-      state.modals = state.modals.slice(0, state.modals.findLastIndex((modal) => modalType === modal.modalType));
+      const lastIndex = state.modals.findLastIndex((modal) => modalType === modal.modalType);
+      closedModal = state.modals[lastIndex].modalProps;
+      state.modals = state.modals.slice(0, lastIndex);
+    }
+    if (closedModal?.element) {
+      const element = closedModal.element;
+      setTimeout(() => element.focus(), 0);
     }
   }),
-}), { enableAutoFreeze: true }));
+}), {
+  enableAutoFreeze: false,
+}));
 
 export { useModalsStore };