Add new "dialogs" feature

[reinink]

This PR adds first class support for dialogs (modals) to Inertia.js. It works by adding a dialog component to the DOM as a sibling to the page component. Dialogs have their own props and URL. To open a dialog, you simply navigate to that endpoint.

• [x] #928
• [ ] #929
• [ ] #930
• [ ] #931
• [x] #932

[fourstacks]

Hey @reinink, quick question about how best to build towards this dialogs feature for when it lands if you can spare the time?

Would I be correct in saying that dialogs will essentially take the content of the 'destination' page and display it within the slot of whatever dialogue component is specified?

So if I ultimately want to have post creation form appear in a modal but I want that post creation view to have it's own route/controller etc should I (for now) just build that form as a standalone page and when the dialoags feature ships it should mostly just work once I hook up the new API?

Thanks!

[reinink]

So if I ultimately want to have post creation form appear in a modal but I want that post creation view to have it's own route/controller etc should I (for now) just build that form as a standalone page and when the dialoags feature ships it should mostly just work once I hook up the new API?

@fourstacks Yup, that's pretty much it!

[edwingromero]

Hello I am about to start a new project where many modal/dialog ways. And I need to click on a route to open a page and modal.

How long will this feature be available?

[maxeckel]

@edwingromero I've read somewhere, that Jonathan hopes or wants to showcase the feature on Laracon, but that won't mark a release or something.

Until then, there is a great write up by Lars Klopstra about how you can achive this in your app (vue-based).

https://larsklopstra.nl/posts/route-based-modals-with-inertiajs-and-vuejs

[edwingromero]

@edwingromero I've read somewhere, that Jonathan hopes or wants to showcase the feature on Laracon, but that won't mark a release or something.

Until then, there is a great write up by Lars Klopstra about how you can achive this in your app (vue-based).

https://larsklopstra.nl/posts/route-based-modals-with-inertiajs-and-vuejs

Thanks for the answer, I will review the article

[dandoingdev]

Is there a status for this? It's such an exciting feature, and will solve a lot of issues I'm trying to work around.

[claudiodekker]

@dangerdan we're actively working on it :)

[geidelguerra]

@claudiodekker @reinink I there a way I can help you with this feature guys?

[oliverbj]

Would also like to offer my help - really excited for this. It's like the last missing piece of the puzzle 🥇

[ctessier]

Hi @reinink @claudiodekker

I am also very interested in this feature. I am a React & Laravel developer. How can we help to ship this feature asap? I just watched the demo at last month's Laracon. It looks AMAZING! Awesome job 👏👏

Let us know 😉 Thank you

[tpetry]

Watched the Laracon presentation again after being mentioned by @ctessier. Having the ability to define a page the dialog is being used on is very nice! But will there be a solution for the common problem of having stacked modals?

Like for the ping crm demo application you are on the users page. You hit "Create New User" and don't find the organization you want to use in the dropdown. So instead of closing the dialog, going to the organizations page add it and go back to the users page to open the modal again you are just click on a button within the dialog to create a new organization. The modal is stacked on-top of the other one (or hides the other one) and you create the organization, the old modal is then displayed again, refresh and you can select the organization from the dropdown list. The standard problem of forms needing linked relationships. In wire-elements/modal this is named child modals.

[cwbmuller]

@claudiodekker @reinink Just checking if there is any update regarding the dialogs feature and its expected timelines 🙏

[cnb-philip]

Currently rolling my own hacky workaround version of this feature, as our new design makes use of tons of modals/drawers. I don't want my team to have to sometimes use inertia forms, and then sometimes standard axios + non-inertia forms. Would love to see this feature sooner than later.

[oliverbj]

Currently rolling my own hacky workaround version of this feature, as our new design makes use of tons of modals/drawers. I don't want my team to have to sometimes use inertia forms, and then sometimes standard axios + non-inertia forms. Would love to see this feature sooner than later.

Exactly same situation. I'm actually holding of starting a new internal project in my organization, because it will also rely on the dialogs, and I don't want to create my own version if this feature is coming any time soon. 😅

[matthewknill]

Currently rolling my own hacky workaround version of this feature, as our new design makes use of tons of modals/drawers. I don't want my team to have to sometimes use inertia forms, and then sometimes standard axios + non-inertia forms. Would love to see this feature sooner than later.

Exactly same situation. I'm actually holding of starting a new internal project in my organization, because it will also rely on the dialogs, and I don't want to create my own version if this feature is coming any time soon. 😅

We are also holding off starting a new project in anticipation of this feature. Super keen for a release that has dialogs!

[iamniels]

Is this going to be replaced by the stacking feature as discussed by @reinink here https://twitter.com/reinink/status/1376622208903225349 ?

Any outlook on a timetable?

[ctessier]

Is this going to be replaced by the stacking feature as discussed by @reinink here https://twitter.com/reinink/status/1376622208903225349 ?

Any outlook on a timetable?

Man, you're confusing me 😄 This tweet is more than a year old (march 2021), and Jonathan did a demo of the dialog feature, back at Laracon Online in summer 2021, and there was nothing about "stacking" or whatsoever. Although, in the tweet, he was still talking about "modals" and not "dialog", which he said in the demo that the latter is a more suitable term for the feature.

So, I am actually wondering if the "stacking" is still in the picture... The demo with the dialog seemed pretty neat and stable to me.

[iraklisg]

Hello. Is there an estimate on whether this feature is going to be released? Thank you

[mohitmamoria]

I cannot wait to use this in production. What I saw at Laracon blew me away!

[aviemet]

The implementation looks very elegant, looking forward to its release. I have a question about the baseRoute option.

In my application I have standard pages for "create" forms. For related models on these forms, I'll have a "new" button to display a form for the related record in a modal dialog. This basically means the dialog route wouldn't have a useful base route since I would only ever display this as a modal if it was visited from within a form for another record.

So, for instance, /items/new would have a link to /vendors/create to show a modal, but so would /accessories/new, etc. This means /vendors/create doesn't have one single route or path which makes sense to set as a base route. There is however, a /vendors/new route which renders a standard inertia page with the form on it, no modal.

Will it be possible to conditionally redirect to another page if a dialog is visited from outside the context of a modal? So in the example above, visiting the dialog route /vendors/create directly would instead redirect to /vendors/new.

Or perhaps somehow include the base page in the url so the base route is fetched dynamically from request params? I'm thinking something like /items/new/vendors/create which would render a base page of /items/new and also call the dialog route for /vendors/create.

Thank you

[Tofandel]

I also feel like nested modals are paramount for this feature to be complete

I've also worked on it experimentally and released a package for vue 3 (it's very hackish as I have to use inertia's internals and axios interceptors, so don't judge) but it doesn't support nested modals yet (working on it), for that there would need to be a stack of inertia pages, each pile corresponds to a modal and the first one is the page, that would allow to pop out of a modal

One problem is displaying this nesting because the implementation uses a global component on the page to display the current modal, there doesn't seem to be an easy way to display multiple modals at the same time (but is that really a big issue? I think that one modal at a time is fine as long as the previous one comes back when one modal is closed)

The other improvement I would like to see is that the modal should change the current url so that reloading the page keeps the modal open, but do that in a way that doesn't change the endpoint of the page (I'm thinking either a hash or a query string)

Otherwise I'd think of a completely different approach, that is basically a modalable middleware for inertia endpoints, this middleware should reference another controller method, so that it allows nested urls (eg: /admin/users/create) and that the modal can only be accessed from this nested endpoint, then we could simply send the current page back with a $dialog prop

I think I'll explore this middleware idea as it can really simplify the implementation and could potentially be an inerta extension at first

[Frozire]

Since no one has linked this here yet, https://github.com/lepikhinb/momentum-modal provides an excellent alternative for this until further progress on the feature here. The author has even tried to stay near this implementation to have an easy migration in the future.

[Tofandel]

Looks awesome and almost what I had in mind, does it support nested modals already?

[sbc640964]

Can I take a loan on this feature? Or maybe build some kind of building on it? Or not to bet for now? Is there a plan? Is there a prospect? Make balloons and candles for a party?

[aviemet]

Since no one has linked this here yet, https://github.com/lepikhinb/momentum-modal provides an excellent alternative for this until further progress on the feature here. The author has even tried to stay near this implementation to have an easy migration in the future.

Do you happen to know if there is something like momentum for Rails inertia apps?

[marktan93]

Since no one has linked this here yet, https://github.com/lepikhinb/momentum-modal provides an excellent alternative for this until further progress on the feature here. The author has even tried to stay near this implementation to have an easy migration in the future.

Do you happen to know if there is something like momentum for Rails inertia apps?

I don't think there is any package ready for rails. I used reactjs and I took the momentum PHP code and self-wrote the frontend side.

[sbc640964]

I used reactjs and I took the momentum PHP code and self-wrote the frontend side.

@marktan93 Can you share your React code?

[finestgecko]

Since no one has linked this here yet, https://github.com/lepikhinb/momentum-modal provides an excellent alternative for this until further progress on the feature here. The author has even tried to stay near this implementation to have an easy migration in the future.

Do you happen to know if there is something like momentum for Rails inertia apps?

I don't think there is any package ready for rails. I used reactjs and I took the momentum PHP code and self-wrote the frontend side.

I'd love to see the React code too, if you wouldn't mind sharing it :slightly_smiling_face:

[ThaDaVos]

Any progress on this? Just ran into a scenario where I need this, after digging around found this issue and saw the last commit is from April 2021

[marktan93]

I used reactjs and I took the momentum PHP code and self-wrote the frontend side.

@marktan93 Can you share your React code?

i just used the momentum-modal package and then self create a custom modal provider at react js

import { Inertia } from "@inertiajs/inertia";
import React, { useState, createContext, useContext } from "react";

const ModalContext = createContext<any>("");

type Modal = {
    component: string;
    baseURL: string;
    redirectURL: string | null | undefined;
    props: Record<string, any>;
    key: string;
    nonce: string;
} | null;

export const ModalProvider = ({ children }: any) => {
    const [show, setShow] = useState(false);
    const [redirect, setRedirect] = useState("");
    const [title, setTitle] = useState("");
    const [modal, setModal] = useState<Modal>(null);

    return (
        <ModalContext.Provider
            value={{
                show,
                setShow,
                redirect,
                setRedirect,
                title,
                setTitle,
                modal,
                setModal,
            }}
        >
            {children}
        </ModalContext.Provider>
    );
};

export const useModal = () => {
    const {
        show,
        setShow,
        redirect,
        setRedirect,
        title,
        setTitle,
        modal,
        setModal,
    } = useContext(ModalContext);

    const ModalComponent = React.lazy(
        () => import("./../Pages/" + modal?.component)
    );

    const close = () => {
        setShow(false);
        setModal(null);

        return Inertia.visit(modal?.redirectURL, {
            preserveScroll: true,
            preserveState: true,
        });
    };

    return {
        ModalComponent,
        show,
        setShow,
        redirect,
        setRedirect,
        title,
        setTitle,
        modal,
        setModal,
        close,
    };
};

[dwainscheeren]

I just saw the video about the new dialog thing from last year and I wanted to switch from livewire to inertiajs, but now I see it is not yet released. For my projects I really need dialog/modals to create and edit rows. Any idea when this will be released?