Navigation modals not working consistently

[jakewtaylor]

Environment Details

• PHP Version: 8.4.10
• Laravel Version: 12.53.0
• React Version: 19.2.4
• Inertia.js Version: 2.3.8
• Inertia Modal Version: 2.0.0-beta.1

---

Bug Report

Description

Navigation modals don't work consistently

Steps To Reproduce

Hey @pascalbaljet, I seem to be having issues using the v2 beta.

Possibly related to #147 ?

In my setup I have these routes:

• /notes - base page
• /notes/:id - "view" page, this is a modal
• /notes/:id/edit "edit" page, this is also a modal

Issues/repro steps:

• Start on /notes
• I click into /notes/1 with a <ModalLink navigate>
• the modal opens and the URL updates correctly
• I dismiss the modal
• The modal closes and the URL returns to /notes
• All good so far!
• I click the ModalLink to /notes/1 again
• Modal opens, URL updates
• I close the modal
• URL stays on /notes/1

Issue 2:

• Start on /notes
• Click /notes/1
• Opens modal, URL updates
• Within that modal, click a <ModalLink navigate> to /notes/1/edit
• Opens the edit modal on top, URL updates to /notes/1/edit
• Closing the second modal goes back to the first modal, but the URL is stuck on /notes/1/edit
• Closing the first modal closes the modal, but the URL is still stuck on /notes/1/edit

In my case I am using the HeadlessModal component, which I appreciate you say has no support - but I'm trying to pair this with ShadCN Dialogs/Drawers which seems like a fairly common use case.

I really want this package to work as this functionality is something I desperately need, I'd be more than happy to give more information if it helps!

I've also noticed a seemingly intermittent issue when reloading a modal page sometimes causes a runtime error where modalContext is undefined (while the code is only checking for !== null), but ironically I can't reproduce this right now. If it happens again I'll try make an issue with the stacktrace.

[jakewtaylor]

export function DrawerModal({
  children,
  side = "right",
  title,
  description,
  ref,
}: DrawerModalProps) {
  return (
    <HeadlessModal ref={ref}>
      {({ close, isOpen, afterLeave, setOpen }) => (
        <Drawer
          open={isOpen}
          onClose={() => {
            close();
            afterLeave();
            setOpen(false);
          }}
          direction={side}
          autoFocus
        >
          <DrawerContent className="sm:max-w-lg!">
            <DrawerHeader>
              <DrawerTitle>{title}</DrawerTitle>
              {description && (
                <DrawerDescription>{description}</DrawerDescription>
              )}
            </DrawerHeader>

            {children}
          </DrawerContent>
        </Drawer>
      )}
    </HeadlessModal>
  );
}

Here's my DrawerModal component which I use at the top-level of pages. I typically was just doing onClose={close} but added in the afterLeave and setOpen calls to try and fix this issue, but to no avail.

All the Drawer components are ShadCN.

[fusigabs]

Same issues here.