From 1b30fa55a9c57ac7dda045471a97d876021cb852 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Wed, 1 Jan 2025 13:03:43 +0200
Subject: [PATCH] fix(Modal): RemoveScroll is overriding Modal's div's ref

---
 packages/core/src/components/Modal/Modal/Modal.tsx  |  3 +--
 .../components/Modal/Modal/__tests__/Modal.test.tsx | 13 +++++++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/components/Modal/Modal/Modal.tsx b/packages/core/src/components/Modal/Modal/Modal.tsx
index 31e1b23d2c..0fdddee9c6 100644
--- a/packages/core/src/components/Modal/Modal/Modal.tsx
+++ b/packages/core/src/components/Modal/Modal/Modal.tsx
@@ -115,14 +115,13 @@ const Modal = forwardRef(
                     style={zIndexStyle}
                   />
                   <FocusLockComponent returnFocus>
-                    <RemoveScroll forwardProps>
+                    <RemoveScroll forwardProps ref={ref}>
                       <motion.div
                         variants={modalAnimationVariants}
                         initial="exit"
                         animate="enter"
                         exit="exit"
                         custom={anchorElementRef}
-                        ref={ref}
                         className={cx(
                           styles.modal,
                           getStyle(styles, camelCase("size-" + size)),
diff --git a/packages/core/src/components/Modal/Modal/__tests__/Modal.test.tsx b/packages/core/src/components/Modal/Modal/__tests__/Modal.test.tsx
index 89ca0d4372..5ac8f7337e 100644
--- a/packages/core/src/components/Modal/Modal/__tests__/Modal.test.tsx
+++ b/packages/core/src/components/Modal/Modal/__tests__/Modal.test.tsx
@@ -61,6 +61,19 @@ describe("Modal", () => {
     expect(getByText("My content")).toBeInTheDocument();
   });
 
+  it("ensures the ref prop does not return null when modal is shown", () => {
+    const ref = React.createRef<HTMLDivElement>();
+
+    const { getByTestId } = render(
+      <Modal id={id} show ref={ref} data-testid="modal">
+        <div>Content</div>
+      </Modal>
+    );
+
+    expect(getByTestId("modal")).toBeInTheDocument();
+    expect(ref.current).not.toBeNull();
+  });
+
   it("applies default size as 'medium' when not supplied with a size", () => {
     const { getByRole } = render(
       <Modal id={id} show>