Custom Drawer component via Modal/Dialog with Framer Motion not capturing escape key exit

[deltasierra96]

I'm creating a drawer component and all is mostly working fine, however the escape key doesn't close the Modal unless the user clicks inside. I suspect it's something to do with refs not being forwarded with the custom Motion components as when I remove them and retain the same component composition, it works as expected.

I followed something similar to the Gesture Driven Modal given in the RAC examples and the escape key functionality appears to work just fine.

Drawer component:

const duration = 0.3;

const motionOverlay: Variants = {
  open: {
    opacity: 1
  },
  closed: {
    opacity: 0,
    transition: { delay: 0.5, duration: duration, ease: [0.32, 0.72, 0, 1] }
  }
};

const motionModal: Variants = {
  open: (position: DrawerPositionProps) => ({
    visibility: 'visible',
    opacity: 1,
    x: 0,
    transition: { delay: 0.125, duration: duration, ease: [0.32, 0.72, 0, 1] }
  }),
  closed: (position: DrawerPositionProps) => ({
    visibility: 'hidden',
    opacity: 0,
    x: position === 'right' ? 'var(--menu-width)' : 'calc(var(--menu-width) * -1)',
    transition: { delay: 0.25, duration: duration, ease: [0.72, 0.32, 0, 1] }
  })
};

const motionDialogContent: Variants = {
  open: {
    opacity: 1,
    transition: { delay: 0.25, duration: duration, ease: [0.32, 0.72, 0, 1] }
  },
  closed: {
    opacity: 0,
    transition: { duration: duration, ease: [0.32, 0.72, 0, 1] }
  }
};

type DrawerPositionProps = 'left' | 'right';
type DrawerSizeProps = 'lg' | 'xl';

type _DrawerProps = ModalOverlayProps &
  MotionProps & {
    position?: DrawerPositionProps;
    size?: DrawerSizeProps;
  };

type _ModalProps = _DrawerProps;

const _Modal = forwardRef<HTMLDivElement, _ModalProps>((props, ref) => (
  <Modal ref={ref} {...props} />
));

type _ModalOverlayProps = ModalOverlayProps;

const _ModalOverlay = forwardRef<HTMLDivElement, _ModalOverlayProps>((props, ref) => (
  <ModalOverlay ref={ref} {...props} />
));

type _ModalDialogProps = DialogProps;

const _ModalDialog = forwardRef<HTMLElement, _ModalDialogProps>((props, ref) => (
  <Dialog ref={ref} {...props} />
));

const MotionModal = motion(_Modal);
const MotionOverlay = motion(_ModalOverlay);
const MotionDialog = motion(_ModalDialog);

export const Drawer = ({
  children,
  position = 'right',
  size = 'xl',
  isDismissable = true,
  isOpen,
  ...props
}: _DrawerProps) => {
  return (
    <AnimatePresence>
      {isOpen && (
        <MotionOverlay
          {...props}
          isOpen
          variants={motionOverlay}
          initial={'closed'}
          animate={'open'}
          exit={'closed'}
          isDismissable={isDismissable}
          className={clsx('fixed inset-0 z-header-safe bg-black/30')}
        >
          <MotionModal
            {...props}
            variants={motionModal}
            initial={'closed'}
            animate={'open'}
            exit={'closed'}
            custom={position}
            isDismissable={isDismissable}
            className={clsx(
              'absolute inset-y-0 h-full p-4',
              size === 'lg' && 'w-[44rem] [--menu-width:44rem]',
              size === 'xl' && 'w-[56rem] [--menu-width:56rem]',
              position === 'left' && 'left-0',
              position === 'right' && 'right-0'
            )}
          >
            <MotionDialog className={clsx('h-full w-full rounded-md bg-white outline-none')}>
              <motion.div
                variants={motionDialogContent}
                initial={'closed'}
                animate={'open'}
                exit={'closed'}
              >
                <>{children}</>
              </motion.div>
            </MotionDialog>
          </MotionModal>
        </MotionOverlay>
      )}
    </AnimatePresence>
  );
};

Useage:

<>
  <Button
    aria-label="Open mobile navigation"
    onPress={() => setIsNavOpen(true)}>
    Open
  </Button>
  <Drawer position="left" isOpen={isNavOpen} onOpenChange={(e) => setIsNavOpen(e)}>
    <p>Drawer content</>
  </Drawer>
</>