[BUG] - Modal onOpenChange only fires on close

[Twansparant]

NextUI Version

2.4.8

Describe the bug

I'm trying to (lazy) load a video in a nextui modal when it opens and pause it when it closes. When I use the most basic modal example I can find, the onOpenChange event only fires when the modal closes.

Your Example Website or App

CodeSandbox

Steps to Reproduce the Bug or Issue

When running the most basic example, you will see the onOpenChange only fires when closing the modal:

import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure} from "@nextui-org/react";

export default function App() {
  const {isOpen, onOpen, onOpenChange} = useDisclosure();

  return (
    <>
      <Button onPress={onOpen}>Open Modal</Button>
      <Modal
            isOpen={isOpen}
            onOpenChange={isOpen => {
                  console.log(isOpen) // only fires on close
                  onOpenChange()
            }}
      >
        <ModalContent>
          {(onClose) => (
            <>
              <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
              <ModalBody>
                <p> 
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  Nullam pulvinar risus non risus hendrerit venenatis.
                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  Nullam pulvinar risus non risus hendrerit venenatis.
                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
                </p>
                <p>
                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit
                  dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. 
                  Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. 
                  Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur 
                  proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
                </p>
              </ModalBody>
              <ModalFooter>
                <Button color="danger" variant="light" onPress={onClose}>
                  Close
                </Button>
                <Button color="primary" onPress={onClose}>
                  Action
                </Button>
              </ModalFooter>
            </>
          )}
        </ModalContent>
      </Modal>
    </>
  );
}

Expected behavior

I would expect the onOpenChange would also fire when the modal is fully opened and all content is loaded, but it does not?

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[linear[bot]]

ENG-1458 [BUG] - Modal onOpenChange only fires on close

[sanuj21]

@wingkwong can i work on this ?

[ryo-manba]

As a temporary workaround, you can pass onChange to useDisclosure to handle this.

const { isOpen, onOpen, onOpenChange } = useDisclosure({
    onChange: console.log,
})

See: https://github.com/nextui-org/nextui/pull/3902#issuecomment-2439625140