Open iamvinny opened 1 month ago
Hey! Happy to try and help out here.
Would you be able to put together a minimal reproduction of this as a Git repo for me?
I only ask because I've been trying to reproduce this issue, but setting the open
state to true
on load is working for me in both the Dialog
and Alert
components, so I'm not sure what's up here.
Hey! Happy to try and help out here.
Would you be able to put together a minimal reproduction of this as a Git repo for me?
I only ask because I've been trying to reproduce this issue, but setting the
open
state totrue
on load is working for me in both theDialog
andAlert
components, so I'm not sure what's up here.
Thanks for your prompt response to the issue!
After some time debugging, I managed to create a minimal Git repository that reproduces the issue. The problem appears to occur specifically when the Catalyst sidebar is present, combined with a Loading
state or any condition that delays the full DOM load in the application-layout
component.
In the example below, I'm returning a <Loading />
component while waiting for the session data to be fetched. oddly enough, this causes the modal to not display automatically, even though the modal works perfectly when manually triggered by clicking a button.
export function ApplicationLayout({
events,
children,
}: {
events: Awaited<ReturnType<typeof getEvents>>
children: React.ReactNode
}) {
let pathname = usePathname()
const { logout, user } = useAuth({ middleware: 'auth' } as any)
if (!user) { return 'Loading...' }
return (
<SidebarLayout
...
For context, I'm using the hook available at laravel/breeze-next project for session management. However, I was able to replicate the issue simply by adding a delay in the ApplicationLayout file to simulate the session fetching process.
It seems that any session management approach that introduces a loading screen before rendering the actual content could trigger this issue. The strange part is that the modal component is present in the DOM (visible in the inspector), but it doesn’t appear on the screen until manually triggered.
Below is the Github repo I put together: https://github.com/iamvinny/catalyst-modal-bug
Let me know if you need any more details or if there's anything else I can do to assist!
What component (if applicable)
Describe the bug The modal does not automatically open when the page loads, even though the
useState
is set totrue
. The modal works correctly without Catalyst styling when usingDialog
fromheadlessui
.To Reproduce Steps to reproduce the behavior:
headlessui
where the modal opens as expected.Expected behavior The modal should automatically open when the page loads if the
useState
is set totrue
.Browser/Device (if applicable)
Additional context The issue occurs specifically when using the Catalyst
Alert
component. The same logic works correctly when using theDialog
component fromheadlessui
, indicating a potential issue with how theopen
prop is being handled in Catalyst'sAlert
component.Catalyst example
Pure HeadlessUI Example: