Catalyst Alert Modal Does Not Automatically Open on Page Load

[iamvinny]

What component (if applicable)

• URL for category: https://catalyst.tailwindui.com/docs/alert
• Component name: Catalyst Alert Component

Describe the bug The modal does not automatically open when the page loads, even though the useState is set to true. The modal works correctly without Catalyst styling when using Dialog from headlessui.

To Reproduce Steps to reproduce the behavior:

1. Copy the example code for Catalyst UI Alert and create a new component
2. Ensure the component is rendered with isOpen state set to true.
3. Observe that the modal does not open automatically on page load.
4. Compare with the same logic implemented using Dialog from headlessui where the modal opens as expected.

Expected behavior The modal should automatically open when the page loads if the useState is set to true.

Browser/Device (if applicable)

• OS: macOS 14.5 23F79 arm64
• Browser Google Chrome
• Version 126

Additional context The issue occurs specifically when using the Catalyst Alert component. The same logic works correctly when using the Dialog component from headlessui, indicating a potential issue with how the open prop is being handled in Catalyst's Alert component.

Catalyst example

"use client";

import { Alert, AlertActions, AlertDescription, AlertTitle } from '@/app/components/catalyst/alert'
import { Button } from '@/app/components/catalyst/button'
import { useState } from 'react'

export default function Announcement() {
    let [isOpen, setIsOpen] = useState(true)

    return (
        <>
            <Alert open={isOpen} onClose={setIsOpen}>
            <AlertTitle>Are you sure you want to refund this payment?</AlertTitle>
                <AlertDescription>
                    The refund will be reflected in the customer’s bank account 2 to 3 business days after processing.
                </AlertDescription>
                <AlertActions>
                    <Button plain onClick={() => setIsOpen(false)}>
                        Cancel
                    </Button>
                    <Button onClick={() => setIsOpen(false)}>Refund</Button>
                </AlertActions>
            </Alert>
        </>
    )
}

Pure HeadlessUI Example:

"use client";

import { useState } from 'react'
import { Dialog } from '@headlessui/react'

export default function Announcement() {
  let [isOpen, setIsOpen] = useState(true)

  return (
    <Dialog open={isOpen} onClose={() => setIsOpen(false)}>
      <Dialog.Panel>
        <Dialog.Title>Deactivate account</Dialog.Title>
        <Dialog.Description>
          This will permanently deactivate your account
        </Dialog.Description>

        <p>
          Are you sure you want to deactivate your account? All of your data
          will be permanently removed. This action cannot be undone.
        </p>

        <button onClick={() => setIsOpen(false)}>Deactivate</button>
        <button onClick={() => setIsOpen(false)}>Cancel</button>
      </Dialog.Panel>
    </Dialog>
  )
}