From 87cc7c03aad27fdd8b2781787324cb5347e9a0e2 Mon Sep 17 00:00:00 2001
From: Bohdan Shcherbyna <bogdanscherbinadev@gmail.com>
Date: Sun, 23 Feb 2025 22:48:13 +0200
Subject: [PATCH] fix: 771 - scroll bar shifting issue

---
 src/shared/constants.ts       |  2 ++
 src/shared/ui/modal/modal.tsx | 12 +++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/shared/constants.ts b/src/shared/constants.ts
index 61c324a1d..952cb1deb 100644
--- a/src/shared/constants.ts
+++ b/src/shared/constants.ts
@@ -24,3 +24,5 @@ export const COURSE_LINKS = {
   AWS_CLOUD_DEVELOPER: 'https://rs.school/courses/aws-cloud-developer',
   AWS_DEVOPS: 'https://rs.school/courses/aws-devops',
 };
+
+export const KEY_CODES = { ESCAPE: 'Escape' } as const;
diff --git a/src/shared/ui/modal/modal.tsx b/src/shared/ui/modal/modal.tsx
index 1fb6b2ebf..b3d297593 100644
--- a/src/shared/ui/modal/modal.tsx
+++ b/src/shared/ui/modal/modal.tsx
@@ -1,9 +1,10 @@
-import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
+import React, { KeyboardEvent, ReactNode, useCallback, useEffect, useRef } from 'react';
 import classNames from 'classnames/bind';
 import Image from 'next/image';
 import { createPortal } from 'react-dom';
 
 import closeIcon from '@/shared/assets/svg/close.svg';
+import { KEY_CODES } from '@/shared/constants';
 
 import styles from './modal.module.scss';
 
@@ -56,6 +57,14 @@ export const Modal = ({ isOpen, onClose, children, title, className }: ModalProp
     [handleClose],
   );
 
+  const handleCloseOnEscPress = (e: KeyboardEvent<HTMLDialogElement>) => {
+    e.preventDefault();
+
+    if (e.key === KEY_CODES.ESCAPE) {
+      handleClose();
+    }
+  };
+
   useEffect(() => {
     document.addEventListener('mousedown', handleMouseDown);
 
@@ -87,6 +96,7 @@ export const Modal = ({ isOpen, onClose, children, title, className }: ModalProp
       className={cx('modal', className)}
       ref={dialogRef}
       onClose={handleClose}
+      onKeyDown={handleCloseOnEscPress}
       data-testid="modal"
     >
       <div className={cx('modal-header', { 'no-title': !title })} data-testid="modal-header">