#shadcn/ui Dialog stays open on navigation

36 messages · Page 1 of 1 (latest)

mellow bluff
#

Hey everyone! Im currently building an application using Nextjs 13 and shadcn/ui for the UI. I have a user page where they can click a button to open a dialog box that displays their followers. The user can also click on a user to navigate to their page using the Nextjs <Link /> component. However, when navigating to the next user’s page, the shadcn/ui <Dialog /> component stays open. The expected behavior is the dialog box would close upon navigating to the next page. Usually I would achieve this using a useEffect cleanup function but I don’t know how I would do that with the shadcn/ui component. Below is the code for the component I have

<Dialog>
  <DialogTrigger>Followers</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Followers</DialogTitle>
    </DialogHeader>
      // followers displayed here
  </DialogContent>
</Dialog>
dusky onyx
#

I would also think if you unmount the parent component, the dialog should unmount as well

mellow bluff
#

Seems really weird that it doesn’t contain a prop to close it.
I was thinking the same thing, I thought I was overlooking something and just couldn’t figure it out. Thanks for the response though! I’m not at my pc right now so ill revisit this when I’m back to close the thread or report back

dusky onyx
#

Yeah the component itself looks and functions well, so there might be something being overlooked. But that issue makes me think otherwise as a developer on the project mentioned it would be a great addition to the library.

mellow bluff
#

From my research earlier, im aware of a way to programmatically close it as addressed in the Radix docs (the library that shadcn/ui wraps), but with my implementation of that process (linked below) using useEffect, I couldn’t even get it to open after that. As I said, I’m not at my pc so I dont have the exact implementation, but it was something along the lines of this

https://www.radix-ui.com/docs/primitives/components/dialog#close-after-asynchronous-form-submission

[open, setOpen] = setState(false);

useEffect(() => {
  return () => {
    setOpen(false)
}
}, [])

<Dialog open={open} onOpenChange={setOpen}>
  // other dialog code here….
<\Dialog>
Dialog – Radix UI

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

dusky onyx
#

Ohhh maybe those are the docs I am missing. That looks more promising

mellow bluff
#

Sorry, definitely should’ve mentioned that initially. Just remembered that bit now lol

dusky onyx
#

If you can send the full code when you get back to your PC, I would be happy to try and take a look

mellow bluff
#

Sorry, let me resend the text bits differently, just read the help rules portion on that

dusky onyx
#

Thanks for sending that over. I will try and take a look tonight. If you are able to post this to GitHub in the meantime, that would save some time on my end. No worries if that isn't doable.

mellow bluff
dusky onyx
#

Unfortunately can't seem to get it running without env

mellow bluff
#

I have a vercel preview for that branch, but it requires a login to access the profile page at the moment

dusky onyx
#

Make I can just make a custom demo real quick this evening..

#

Seems like it could be useful for anyone use the lib anyways haha

mellow bluff
#

im trying to spin one up myself at the moment without all the required dependencies, if you'd like i can put it up on github and send it your way

dusky onyx
mellow bluff
#

I sent you an invite on github to the repo. An interesting thing I realized while making the demo was that in my case, im using dynamic routes for the users. When I navigated with the modal open to another dynamic route, it stayed open. However, when I created a similar example with predefined routes, the modal did not stay open

#

You can see the differences with "dynamic user 1" and "user 1"

dusky onyx
#

I got a working example here

#

Let me know if you have any questions

#

Oh wait just found a bug lol

#

Fixed

#

The basic idea was removing the trigger and creating your own button to handle that. When you do it that way, using the useEffect cleanup function works as expected.

#

Just need to make sure to add the onOpenChange prop to the dialog so it will close properly.

mellow bluff
dusky onyx
#

Nice, looks similar. Seems good to me!

mellow bluff
dusky onyx
#

I feel like that should be shown in their docs anyways lol

#

Although maybe navigation within the modal is not a standard use case