TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-23 10:53:34 +03:00
Code Issues Projects Releases Wiki Activity

Added escape key handler to select elements (#19689)

Browse Source 
ref DES-58
This commit is contained in:
Sodbileg Gansukh 2024-03-11 17:40:03 +08:00 committed by GitHub
parent 4c02b60ec3
commit be3a5664a2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 21 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
apps/admin-x-design-system/src/global/form/Select.tsx
View File

@ -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<SelectProps> = ({
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(