[SwipeableDrawer] Make paper ref accessible (mui#35082)

Signed-off-by: Zeeshan Tamboli <[email protected]> Co-authored-by: Zeeshan Tamboli <[email protected]>
jesrodri · Dec 6, 2022 · d441706 · d441706
1 parent 0563518
commit d441706
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
@@ -5,6 +5,7 @@ import { elementTypeAcceptingRef } from '@mui/utils';
 import { useThemeProps } from '@mui/system';
 import { NoSsr } from '@mui/base';
 import Drawer, { getAnchor, isHorizontal } from '../Drawer/Drawer';
+import useForkRef from '../utils/useForkRef';
 import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
 import useEventCallback from '../utils/useEventCallback';
@@ -168,6 +169,8 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref)
   const backdropRef = React.useRef();
   const paperRef = React.useRef();
 
+  const handleRef = useForkRef(PaperProps.ref, paperRef);
+
   const touchDetected = React.useRef(false);
 
   // Ref for transition duration based on / to match swipe speed
@@ -574,7 +577,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref)
             pointerEvents: variant === 'temporary' && !open ? 'none' : '',
             ...PaperProps.style,
           },
-          ref: paperRef,
+          ref: handleRef,
         }}
         anchor={anchor}
         transitionDuration={calculatedDurationRef.current || transitionDuration}

diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
@@ -500,6 +500,16 @@ describe('<SwipeableDrawer />', () => {
       setProps({ variant: 'temporary' });
       expect(document.querySelector('[class*=PrivateSwipeArea-root]')).not.to.equal(null);
     });
+
+    it('should be able to attach paper ref passed through PaperProps', () => {
+      const ref = React.createRef();
+      render(
+        <SwipeableDrawer onOpen={() => {}} onClose={() => {}} PaperProps={{ ref }} open>
+          <div />
+        </SwipeableDrawer>,
+      );
+      expect(ref.current).not.to.equal(null);
+    });
   });
 
   describe('disableSwipeToOpen', () => {