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 };