diff --git a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
index 3c3d43e4b..24277dd84 100644
--- a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/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: ,
});
} else {
@@ -256,7 +257,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
}
};
- const handleClose = (goBack: any = true) => {
+ const handleClose = () => {
(refs.reference.current as HTMLButtonElement)?.focus();
closeDropdownMenu();
diff --git a/packages/pl-fe/src/modals/dropdown-menu-modal.tsx b/packages/pl-fe/src/modals/dropdown-menu-modal.tsx
index 1f372b1ac..f81e2d59c 100644
--- a/packages/pl-fe/src/modals/dropdown-menu-modal.tsx
+++ b/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;
}
diff --git a/packages/pl-fe/src/stores/modals.ts b/packages/pl-fe/src/stores/modals.ts
index a47f82682..e88997803 100644
--- a/packages/pl-fe/src/stores/modals.ts
+++ b/packages/pl-fe/src/stores/modals.ts
@@ -101,12 +101,22 @@ const useModalsStore = create()(mutative((set) => ({
if (state.modals.length === 0) {
return;
}
+ let closedModal: Record | 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 };