Navigating from a modal to another modal displays the current modal again

[innocenzi]

In my application, I have a modal that should redirect to another modal:

public function show(Leg $leg)
{
    $this->authorize('view', $leg);

    return inertia()->modal('passengers.attach', [
        'leg' => LegData::from($leg),
        'contacts' => $leg->passengers,
    ])->baseRoute('booking.index', ['scope' => 'upcoming']);
}

public function create(Leg $leg)
{
    $this->authorize('view', $leg);

    return inertia()->modal('passengers.create', [
        'leg' => LegData::from($leg),
    ])->baseRoute('booking.index', ['scope' => 'upcoming']);
}

The first modal opens correctly, but for some reason, when navigating to the second modal with Inertia.get('/path-to-second-modal'), the render method of Momentum\Modal\Modal is executed twice. The first time, it returns the proper Inertia response, with the right component, but the second time, it returns the initial response:

https://user-images.githubusercontent.com/16060559/176454765-9e30a5fa-75c7-4ec4-943e-04d2589facca.mp4

[innocenzi]

The issue is that the "base page" is using the "background url", which is using the "redirect url" when an Inertia request is the initiator. In that case, the previous url from the session will be used as the background page if it's different, instead of the defined baseURL. I'm not sure why it is the case, there's probably a reason - but in my case, I'm just getting my modal back.

So I managed to work around that by using the X-Inertia-Modal-Redirect:

function createPassenger() {
    Inertia.visit(route('leg.passengers.create', { leg: props.leg }), {
        headers: {
            'X-Inertia-Modal-Redirect': route('booking.index', { scope: 'upcoming' }),
        },
    })
}

Do you have any idea how to circumvent that by default?

[lepikhinb]

Primarily, the issue was that it didn't preserve the X-Inertia-Modal-Redirect header on get requests. Just tagged an update, let me know if this works as expected now.

Make sure to update both composer and npm dependencies.

[innocenzi]

Hey, unfortunately it still doesn't work. The exact same thing happens - the referer is the URL of my first modal, so it gets used.

Is this supposed to set headers for every request when the modal is open?

[innocenzi]

So, turns out we need to have a single axios version - my package.json required the latest one, so the headers were not set when navigating.

Thanks Boris for debugging that with me