From b5a6a4fe83bcd79f4c15c2182123c29145b31ade Mon Sep 17 00:00:00 2001
From: Arjan Singh <arjan@comfy.org>
Date: Wed, 17 Sep 2025 17:27:00 -0700
Subject: [PATCH] [fix] close modal on click

---
 .../assets/components/AssetBrowserModal.stories.ts    | 11 +++++++++++
 src/platform/assets/components/AssetBrowserModal.vue  |  6 +++++-
 .../assets/composables/useAssetBrowserDialog.ts       |  6 +-----
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/platform/assets/components/AssetBrowserModal.stories.ts b/src/platform/assets/components/AssetBrowserModal.stories.ts
index feadf58a7..fb32b4bbe 100644
--- a/src/platform/assets/components/AssetBrowserModal.stories.ts
+++ b/src/platform/assets/components/AssetBrowserModal.stories.ts
@@ -1,10 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { provide } from 'vue'
 
 import AssetBrowserModal from '@/platform/assets/components/AssetBrowserModal.vue'
 import {
   createMockAssets,
   mockAssets
 } from '@/platform/assets/fixtures/ui-mock-assets'
+import { OnCloseKey } from '@/types/widgetTypes'
 
 // Story arguments interface
 interface StoryArgs {
@@ -63,6 +65,9 @@ export const Default: Story = {
         console.log('Modal closed')
       }
 
+      // Provide the close function for BaseModalLayout to inject
+      provide(OnCloseKey, onClose)
+
       return {
         ...args,
         onAssetSelect,
@@ -103,6 +108,9 @@ export const SingleAssetType: Story = {
         console.log('Modal closed')
       }
 
+      // Provide the close function for BaseModalLayout to inject
+      provide(OnCloseKey, onClose)
+
       // Create assets with only one type (checkpoints)
       const singleTypeAssets = createMockAssets(15).map((asset) => ({
         ...asset,
@@ -152,6 +160,9 @@ export const NoLeftPanel: Story = {
         console.log('Modal closed')
       }
 
+      // Provide the close function for BaseModalLayout to inject
+      provide(OnCloseKey, onClose)
+
       return { ...args, onAssetSelect, onClose, assets: mockAssets }
     },
     template: `
diff --git a/src/platform/assets/components/AssetBrowserModal.vue b/src/platform/assets/components/AssetBrowserModal.vue
index cda99726f..27416b988 100644
--- a/src/platform/assets/components/AssetBrowserModal.vue
+++ b/src/platform/assets/components/AssetBrowserModal.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, provide } from 'vue'
 
 import SearchBox from '@/components/input/SearchBox.vue'
 import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
@@ -46,6 +46,7 @@ import AssetGrid from '@/platform/assets/components/AssetGrid.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
 import { useAssetBrowser } from '@/platform/assets/composables/useAssetBrowser'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { OnCloseKey } from '@/types/widgetTypes'
 import { cn } from '@/utils/tailwindUtil'
 
 const props = defineProps<{
@@ -62,6 +63,9 @@ const emit = defineEmits<{
   close: []
 }>()
 
+// Provide the close function for BaseModalLayout to inject
+provide(OnCloseKey, props.onClose || (() => {}))
+
 // Use AssetBrowser composable for all business logic
 const {
   searchQuery,
diff --git a/src/platform/assets/composables/useAssetBrowserDialog.ts b/src/platform/assets/composables/useAssetBrowserDialog.ts
index c6a0af215..cc2a217a8 100644
--- a/src/platform/assets/composables/useAssetBrowserDialog.ts
+++ b/src/platform/assets/composables/useAssetBrowserDialog.ts
@@ -31,10 +31,6 @@ export const useAssetBrowserDialog = () => {
       props.onAssetSelected?.(assetPath)
     }
 
-    const handleClose = () => {
-      hide()
-    }
-
     // Default dialog configuration for AssetBrowserModal
     const dialogComponentProps = {
       headless: true,
@@ -74,7 +70,7 @@ export const useAssetBrowserDialog = () => {
         currentValue: props.currentValue,
         assets,
         onSelect: handleAssetSelected,
-        onClose: handleClose
+        onClose: () => hide()
       },
       dialogComponentProps
     })