Merge pull request #3991 from Sage/FE-4062-dialog-full-screen-content…

…-ref

fix(dialog-full-screen): fix content ref forwarding - FE-4062

src/components/dialog-full-screen/dialog-full-screen.component.js

@@ -23,11 +23,10 @@ const DialogFullScreen = ({
   disableContentPadding,
   disableEscKey,
   onCancel,
+  contentRef,
   ...rest
 }) => {
   const dialogRef = useRef();
-  const headingRef = useRef();
-  const contentRef = useRef();
 
   const closeIcon = () => {
     if (!showCloseIcon || !onCancel) return null;
@@ -44,7 +43,7 @@ const DialogFullScreen = ({
   };
 
   const dialogTitle = () => (
-    <FullScreenHeading hasContent={title} ref={headingRef}>
+    <FullScreenHeading hasContent={title}>
       {typeof title === "string" ? (
         <Heading
           title={title}
@@ -129,6 +128,11 @@ DialogFullScreen.propTypes = {
   headerChildren: PropTypes.node,
   /** For legacy styling when used with Pages component. Do not use this unless using Pages within a DialogFullScreen */
   pagesStyling: PropTypes.bool,
+  /** Reference to the scrollable content element */
+  contentRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  ]),
 };
 
 export default DialogFullScreen;

src/components/dialog-full-screen/dialog-full-screen.spec.js

@@ -38,6 +38,34 @@ describe("DialogFullScreen", () => {
     );
   });
 
+  describe("contentRef", () => {
+    it("the content ref should be forwarded", () => {
+      let mockRef;
+
+      const WrapperComponent = () => {
+        mockRef = useRef();
+
+        return (
+          <DialogFullScreen
+            onCancel={onCancel}
+            className="foo"
+            open
+            title="my title"
+            subtitle="my subtitle"
+            contentRef={mockRef}
+          >
+            <Button>Button</Button>
+            <Button>Button</Button>
+          </DialogFullScreen>
+        );
+      };
+
+      wrapper = mount(<WrapperComponent />);
+
+      expect(mockRef.current).toBe(wrapper.find(StyledContent).getDOMNode());
+    });
+  });
+
   describe("autoFocus", () => {
     it("should focus the first element by default", () => {
       mount(