fix(Modal): RemoveScroll is overriding Modal's div's ref

mondaycom · Jan 1, 2025 · 1b30fa5 · 1b30fa5
1 parent 428ba51
commit 1b30fa5
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git 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
@@ -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>