WIP fix for referring local modal (see #53)

Author: pascalbaljet

demo-app/resources/js/Pages/Local.jsx

@@ -1,7 +1,14 @@
 import { Modal, ModalLink } from '@inertiaui/modal-react';
 import Container from './Container';
+import { useRef } from 'react';
 
 export default function Local() {
+    const modalRef = useRef(null);
+
+    function closeModal() {
+        modalRef.current.close();
+    }
+
     return (
         <>
             <Container>
@@ -15,11 +22,14 @@ export default function Local() {
                     </ModalLink>
                 </div>
             </Container>
-            <Modal name="local">
+            <Modal name="local" ref={modalRef}>
                 This is a local modal
                 <ModalLink href="/roles/create">
                     Create Role
                 </ModalLink>
+                <button onClick={closeModal}>
+                    Close Modal through Ref
+                </button>
             </Modal>
         </>
     );

demo-app/resources/js/Pages/Local.vue

@@ -1,6 +1,13 @@
 <script setup>
 import Container from './Container.vue'
 import { Modal, ModalLink } from '@inertiaui/modal-vue'
+import { ref } from 'vue';
+
+const modalRef = ref(null);
+
+function closeModal() {
+    modalRef.value.close();
+}
 </script>
 
 <template>
@@ -14,11 +21,15 @@ import { Modal, ModalLink } from '@inertiaui/modal-vue'
         </div>
     </Container>
 
-    <Modal name="local">
+    <Modal name="local" ref="modalRef">
         This is a local modal
 
         <ModalLink href="/roles/create">
             Create Role
         </ModalLink>
+
+        <button @click="closeModal">
+            Close Modal through Ref
+        </button>
     </Modal>
 </template>

demo-app/tests/Browser/LocalModalTest.php

@@ -20,4 +20,16 @@ public function it_can_open_a_local_modal_and_a_nested_one()
                 ->waitUntilMissingModal(1);
         });
     }
+
+    #[Test]
+    public function it_can_close_a_local_modal_through_a_template_ref()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser->visit('/local')
+                ->clickLink('Open Local Modal')
+                ->waitForTextIn('.im-modal-content', 'This is a local modal')
+                ->press('Close Modal through Ref')
+                ->waitUntilMissingModal(1);
+        });
+    }
 }

react/src/HeadlessModal.jsx

@@ -9,6 +9,7 @@ const HeadlessModal = forwardRef(({ name, children, ...props }, ref) => {
     const { stack, registerLocalModal, removeLocalModal } = useModalStack()
 
     const [localModalContext, setLocalModalContext] = useState(null)
+    let modalContextCopy = name ? localModalContext : stack[modalIndex]
     const modalContext = useMemo(() => (name ? localModalContext : stack[modalIndex]), [name, localModalContext, modalIndex, stack])
 
     const nextIndex = useMemo(() => {
@@ -38,6 +39,7 @@ const HeadlessModal = forwardRef(({ name, children, ...props }, ref) => {
             registerLocalModal(name, (localContext) => {
                 removeListeners = localContext.registerEventListenersFromProps(props)
                 setLocalModalContext(localContext)
+                modalContextCopy = localContext
             })
 
             return () => {
@@ -53,22 +55,22 @@ const HeadlessModal = forwardRef(({ name, children, ...props }, ref) => {
     useImperativeHandle(
         ref,
         () => ({
-            afterLeave: () => modalContext.afterLeave(),
-            close: () => modalContext.close(),
+            afterLeave: () => modalContextCopy.afterLeave(),
+            close: () => modalContextCopy.close(),
             config,
-            emit: (...args) => modalContext.emit(...args),
-            getChildModal: () => modalContext.getChildModal(),
-            getParentModal: () => modalContext.getParentModal(),
-            id: modalContext?.id,
-            index: modalContext?.index,
-            isOpen: modalContext?.isOpen,
-            modalContext,
-            onTopOfStack: modalContext?.onTopOfStack,
-            reload: () => modalContext.reload(),
-            setOpen: () => modalContext.setOpen(),
-            shouldRender: modalContext?.shouldRender,
+            emit: (...args) => modalContextCopy.emit(...args),
+            getChildModal: () => modalContextCopy.getChildModal(),
+            getParentModal: () => modalContextCopy.getParentModal(),
+            id: modalContextCopy?.id,
+            index: modalContextCopy?.index,
+            isOpen: modalContextCopy?.isOpen,
+            modalContext: modalContextCopy,
+            onTopOfStack: modalContextCopy?.onTopOfStack,
+            reload: () => modalContextCopy.reload(),
+            setOpen: () => modalContextCopy.setOpen(),
+            shouldRender: modalContextCopy?.shouldRender,
         }),
-        [modalContext],
+        [modalContextCopy],
     )
 
     return (

vue/src/HeadlessModal.vue

@@ -92,20 +92,20 @@ function emit(event, ...args) {
 }
 
 defineExpose({
-    afterLeave: modalContext.value.afterLeave,
-    close: modalContext.value.close,
-    config: config.value,
+    afterLeave: () => modalContext.value?.afterLeave(),
+    close: () => modalContext.value?.close(),
+    config: computed(() => modalContext.value?.config),
     emit,
-    getChildModal: modalContext.value.getChildModal,
-    getParentModal: modalContext.value.getParentModal,
-    id: modalContext.value.id,
-    index: modalContext.value.index,
-    isOpen: modalContext.value.isOpen,
-    modalContext: modalContext.value,
-    onTopOfStack: modalContext.value.onTopOfStack,
-    reload: modalContext.value.reload,
-    setOpen: modalContext.value.setOpen,
-    shouldRender: modalContext.value.shouldRender,
+    getChildModal: () => modalContext.value?.getChildModal(),
+    getParentModal: () => modalContext.value?.getParentModal(),
+    id: computed(() => modalContext.value?.id),
+    index: computed(() => modalContext.value?.index),
+    isOpen: computed(() => modalContext.value?.isOpen),
+    modalContext: computed(() => modalContext.value?.modalContext),
+    onTopOfStack: computed(() => modalContext.value?.onTopOfStack),
+    reload: (...args) => modalContext.value?.reload(...args),
+    setOpen: (...args) => modalContext.value?.setOpen(...args),
+    shouldRender: computed(() => modalContext.value?.shouldRender),
 })
 
 const nextIndex = computed(() => {