diff --git a/apps/admin-x-design-system/src/global/form/Select.tsx b/apps/admin-x-design-system/src/global/form/Select.tsx index 43e710d45b..bd6624c1da 100644 --- a/apps/admin-x-design-system/src/global/form/Select.tsx +++ b/apps/admin-x-design-system/src/global/form/Select.tsx @@ -1,5 +1,5 @@ import clsx from 'clsx'; -import React, {useId, useMemo} from 'react'; +import React, {useId, useMemo, useEffect} from 'react'; import ReactSelect, {ClearIndicatorProps, DropdownIndicatorProps, GroupBase, OptionProps, OptionsOrGroups, Props, components} from 'react-select'; import AsyncSelect from 'react-select/async'; import {useFocusContext} from '../../providers/DesignSystemProvider'; @@ -118,6 +118,26 @@ const Select: React.FC = ({ setFocusState(false); }; + useEffect(() => { + const handleEscapeKey = (event: KeyboardEvent) => { + if (event.key === 'Escape') { + // Fix for Safari - if an element in the modal is focused, closing it will jump to + // the bottom of the page because Safari tries to focus the "next" element in the DOM + if (document.activeElement && document.activeElement instanceof HTMLElement) { + document.activeElement.blur(); + } + setFocusState(false); + } + }; + + document.addEventListener('keydown', handleEscapeKey); + + // Clean up the event listener when the modal is closed + return () => { + document.removeEventListener('keydown', handleEscapeKey); + }; + }, [setFocusState]); + let containerClasses = ''; if (!unstyled) { containerClasses = clsx(