feat(useOverlay): return promise on open method (#4592)

dan-hale · genu · web-flow · commit 58aac862dd0d · 2025-07-28T15:25:48.000+02:00
Co-authored-by: Eugen Istoc &lt;eugenistoc@gmail.com&gt;
diff --git a/docs/content/2.composables/use-overlay.md b/docs/content/2.composables/use-overlay.md
@@ -24,9 +24,10 @@ async function openModal() {
 - The `useOverlay` composable is created using `createSharedComposable`, ensuring that the same overlay state is shared across your entire application.
 
 ::note
-In order to return a value from the overlay, the `overlay.open().instance.result` can be awaited. In order for this to work, however, the **overlay component must emit a `close` event**. See example below for details.
+In order to return a value from the overlay, the `overlay.open().instance` can be awaited. In order for this to work, however, the **overlay component must emit a `close` event**. See example below for details.
 ::
 
+
 ## API
 
 ### `create(component: T, options: OverlayOptions): OverlayInstance`
@@ -166,7 +167,7 @@ const openModalB = async () => {
   // Open modalB, and wait for its result
   const modalBInstance = modalB.open()
 
-  const input = await modalBInstance.result
+  const input = await modalBInstance
 
   // Pass the result from modalB to the slideover, and open it
   slideoverA.open({ input })
diff --git a/src/runtime/composables/useOverlay.ts b/src/runtime/composables/useOverlay.ts
@@ -56,7 +56,7 @@ type OverlayInstance<T extends Component> = Omit<ManagedOverlayOptionsPrivate<T>
 
 type OpenedOverlay<T extends Component> = Omit<OverlayInstance<T>, 'open' | 'close' | 'patch' | 'modelValue' | 'resolvePromise'> & {
   result: Promise<CloseEventArgType<ComponentEmit<T>>>
-}
+} & Promise<CloseEventArgType<ComponentEmit<T>>>
 
 function _useOverlay() {
   const overlays = shallowReactive<Overlay[]>([])
@@ -96,13 +96,14 @@ function _useOverlay() {
 
     overlay.isOpen = true
     overlay.isMounted = true
+    const result = new Promise<any>(resolve => overlay.resolvePromise = resolve)
 
-    return {
+    return Object.assign(result, {
       id,
       isMounted: overlay.isMounted,
       isOpen: overlay.isOpen,
-      result: new Promise<any>(resolve => overlay.resolvePromise = resolve)
-    }
+      result
+    })
   }
 
   const close = (id: symbol, value?: any): void => {
diff --git a/test/composables/useOverlay.spec.ts b/test/composables/useOverlay.spec.ts
@@ -143,6 +143,19 @@ describe('useOverlay', () => {
     expect(result).toBe('test-result')
   })
 
+  it('should directly return promise that resolves when closed', async () => {
+    const modal = overlay.create(MockModal)
+    const instance = modal.open()
+
+    // Simulate closing the modal
+    setTimeout(() => {
+      modal.close('test-result')
+    }, 0)
+
+    const result = await instance
+    expect(result).toBe('test-result')
+  })
+
   it('should close an overlay', () => {
     const modal = overlay.create(MockModal)
 
