moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix Escape key not working in modals 

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2022-11-10 21:46:51 +01:00
parent d19a93f109
commit 4d9e4879ed
1 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/soapbox/components/modal_root.tsx
View File

@ -47,12 +47,13 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
const isEditing = useAppSelector(state => state.compose.get('compose-modal')?.id !== null); const isEditing = useAppSelector(state => state.compose.get('compose-modal')?.id !== null);
const handleKeyUp = useCallback((e) => { const visible = !!children;
if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27)
&& !!children) { const handleKeyUp = (e: KeyboardEvent) => {
if (e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27) {
handleOnClose(); handleOnClose();
} }
}, []); };
const handleOnClose = () => { const handleOnClose = () => {
dispatch((_, getState) => { dispatch((_, getState) => {
@ -136,6 +137,8 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
}; };
useEffect(() => { useEffect(() => {
if (!visible) return;
window.addEventListener('keyup', handleKeyUp, false); window.addEventListener('keyup', handleKeyUp, false);
window.addEventListener('keydown', handleKeyDown, false); window.addEventListener('keydown', handleKeyDown, false);
@ -143,7 +146,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
window.removeEventListener('keyup', handleKeyUp); window.removeEventListener('keyup', handleKeyUp);
window.removeEventListener('keydown', handleKeyDown); window.removeEventListener('keydown', handleKeyDown);
}; };
}, []); }, [visible]);
useEffect(() => { useEffect(() => {
if (!!children && !prevChildren) { if (!!children && !prevChildren) {
@ -172,8 +175,6 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
} }
}); });
const visible = !!children;
if (!visible) { if (!visible) {
return ( return (
<div className='z-50 transition-all' ref={ref} style={{ opacity: 0 }} /> <div className='z-50 transition-all' ref={ref} style={{ opacity: 0 }} />