MUI Base Modal Backdrop Not Registering Clicks

Question

I am attempt to implement a Modal using MUI Base Modal component and scss modules for styling:

import { Modal as BaseModal, ModalProps as BaseModalProps } from '@mui/base';

const Backdrop = () => <div onClick={(event) => console.log(event)} className={classes.backdrop}></div>;
const MyModal = (...) => {

        <BaseModal
            className={`${classes.modal} ${className}`}
            open={open}  // prop from parent component
            onClose={(event, reason) => {
                console.log('inside modal onClose')
                console.log('event: ', event)
                console.log('reason: ', reason)
                console.log('calling onClose prop now...')
                onClose()  // prop from parent component
            }}
            slots={{ backdrop: Backdrop }}
            {...other}
        >
        ...
        </BaseModal>
}

When I hit esc, onClose triggers with the expected reason (onClose docs). But when I click on the backdrop, nothing happens. I had previously worked around this via ClickAwayListener but the MUI Base Modal Demos all have functioning backdrops without the need for the ClickAwayListener.

Any thoughts on possible discrepancies?

Answer 1

you shall forwardRef to the backdrop ...

const Backdrop = React.forwardRef<
  HTMLDivElement,
  { open?: boolean; className: string }
>((props, ref) => {
  const { open, className, ...other } = props;
  return (
    <div
      className={clsx({ 'base-Backdrop-open': open }, className)}
      ref={ref}
      {...other}
    />
  );
});