Dialog | Is it possible to disable 'click outside' ?

[chrisbuttery]

I'm looking to render a Dialog wrapped around a formik form.
If the form is considered dirty or touched and the user has clicked outside, I'd like to display a 'cancel confirmation' modal.

const MyComponent = ({ isOpen, onClose, children }) => {
  const [showConfirmationModal, setShowConfirmationModal] = React.useState<boolean>(false);

  const form = useFormik({
    // ... form properties
  });

  const handleClickOutside = (e) => {
   if (form.dirty && form.touched) {
    // dont close the dialog & show another dialog
    setShowConfirmationModal(true); 
    e.preventDefault()
   } else {
    onClose();
   }
  };

  return (
      <div>
        <Dialog.Root open={isOpen} onOpenChange={onClose}>
          <Dialog.Portal>
              <Dialog.Overlay>
                  <Dialog.Content
                      onPointerDownOutside={handleClickOutside}
                  >
                      // Myform
                  </Dialog.Content>
              </Dialog.Overlay>
          </Dialog.Portal>
      </Dialog.Root>

      {showConfirmationModal && (
        <CancelConfirmationModal 
          onCancel={() => setShowConfirmationModal(false)}
          onCloseAnyway={() => {
            setShowConfirmationModal(false);
            onClose();
          }}
        />
      )}
      </div
  );
};

I'm wondering how I could possibly disable the 'click outside' for the initial dialog? It seems that click events for the secondary Dialog are considered 'outside' the primary Dialog.

I'd love to know if someone has got something like this working.
If not, Im wondering if its a possibility that we let Dialog.Content accept the property 'disableOutsidePointerEvents' - as that 'sounds' like something helpful to use.

interface DialogContentTypeProps extends Omit<DialogContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {

For example:

const MyComponent = ({ isOpen, onClose, children }) => {
  const [showConfirmationModal, setShowConfirmationModal] = React.useState<boolean>(false);

  const form = useFormik({
    // ... form properties
  });

  const handleClickOutside = (e) => {
   if (form.dirty && form.touched) {
    // dont close the dialog & show another dialog
    setShowConfirmationModal(true); 
    e.preventDefault()
   } else {
    onClose();
   }
  };

  return (
      <div>
        <Dialog.Root open={isOpen} onOpenChange={onClose}>
          <Dialog.Portal>
              <Dialog.Overlay>
                  <Dialog.Content
                      onPointerDownOutside={handleClickOutside}
                      disableOutsidePointerEvents={showConfirmationModal} // <<<<<<<
                  >
                      // Myform
                  </Dialog.Content>
              </Dialog.Overlay>
          </Dialog.Portal>
      </Dialog.Root>

      {showConfirmationModal && (
        <CancelConfirmationModal 
          onCancel={() => setShowConfirmationModal(false)}
          onCloseAnyway={() => {
            setShowConfirmationModal(false);
            onClose();
          }}
        />
      )}
      </div
  );
};

[b0yblake]

Should you try bypassing the trick 'pointer-events: none' on 'Dialog.Overlay' when the CancelConfirmationModal component is showing?