diff --git a/src/components/Editor/MediaUploader/index.jsx b/src/components/Editor/MediaUploader/index.jsx index 4da8c52d..c5630515 100644 --- a/src/components/Editor/MediaUploader/index.jsx +++ b/src/components/Editor/MediaUploader/index.jsx @@ -51,9 +51,6 @@ const MediaUploader = ({ mediaUploader, onClose, editor, unsplashApiKey }) => { .run(); }; - const handleKeydown = event => - not(isUploading) && event.key === "Escape" && handleClose(); - return ( { closeButton={false} closeOnOutsideClick={not(isUploading)} onClose={handleClose} - onKeyDown={handleKeydown} >
{!isNotPresent(tabs) && ( diff --git a/src/components/EditorContent/ImagePreview.jsx b/src/components/EditorContent/ImagePreview.jsx index 0f6683df..b411fb0e 100644 --- a/src/components/EditorContent/ImagePreview.jsx +++ b/src/components/EditorContent/ImagePreview.jsx @@ -19,18 +19,17 @@ const ImagePreview = ({ imagePreviewDetails, setImagePreviewDetails }) => { }); useEffect(() => { - document.addEventListener( - "keydown", - e => e.key === "Escape" && setImagePreviewDetails(null) - ); + if (!imagePreviewRef.current) return; - return () => - document.removeEventListener( - "keydown", - e => e.key === "Escape" && setImagePreviewDetails(null) - ); + imagePreviewRef.current.setAttribute("tabindex", "-1"); + imagePreviewRef.current.focus(); }, []); + const handleKeyDown = e => { + e.stopPropagation(); + e.key === "Escape" && setImagePreviewDetails(null); + }; + return createPortal(
{isLoading && } @@ -52,6 +51,7 @@ const ImagePreview = ({ imagePreviewDetails, setImagePreviewDetails }) => { alt={t("neetoEditor.editorContent.imagePreviewAltText")} ref={imagePreviewRef} src={imagePreviewDetails.src} + onKeyDown={handleKeyDown} onLoad={() => setIsLoading(false)} /> {imagePreviewDetails && (