From 0c3edb10b06006b8745e626a330d5efdf0b22d0e Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Wed, 21 May 2025 14:48:51 +0800
Subject: [PATCH] fix: getFieldComponentRef will return actual ref within
 AsyncComponentWrapper (#6252)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复异步加载组件时，表单的getFieldComponentRef方法没能获取到正确的组件实例
---
 packages/@core/ui-kit/form-ui/src/form-api.ts | 23 ++++++++++++++++---
 playground/src/views/examples/form/api.vue    |  2 +-
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/@core/ui-kit/form-ui/src/form-api.ts b/packages/@core/ui-kit/form-ui/src/form-api.ts
index 0ae8ed77..e097a465 100644
--- a/packages/@core/ui-kit/form-ui/src/form-api.ts
+++ b/packages/@core/ui-kit/form-ui/src/form-api.ts
@@ -11,7 +11,7 @@ import type { Recordable } from '@vben-core/typings';
 
 import type { FormActions, FormSchema, VbenFormProps } from './types';
 
-import { toRaw } from 'vue';
+import { isRef, toRaw } from 'vue';
 
 import { Store } from '@vben-core/shared/store';
 import {
@@ -100,9 +100,26 @@ export class FormApi {
   getFieldComponentRef<T = ComponentPublicInstance>(
     fieldName: string,
   ): T | undefined {
-    return this.componentRefMap.has(fieldName)
-      ? (this.componentRefMap.get(fieldName) as T)
+    let target = this.componentRefMap.has(fieldName)
+      ? (this.componentRefMap.get(fieldName) as ComponentPublicInstance)
       : undefined;
+    if (
+      target &&
+      target.$.type.name === 'AsyncComponentWrapper' &&
+      target.$.subTree.ref
+    ) {
+      if (Array.isArray(target.$.subTree.ref)) {
+        if (
+          target.$.subTree.ref.length > 0 &&
+          isRef(target.$.subTree.ref[0]?.r)
+        ) {
+          target = target.$.subTree.ref[0]?.r.value as ComponentPublicInstance;
+        }
+      } else if (isRef(target.$.subTree.ref.r)) {
+        target = target.$.subTree.ref.r.value as ComponentPublicInstance;
+      }
+    }
+    return target as T;
   }
 
   /**
diff --git a/playground/src/views/examples/form/api.vue b/playground/src/views/examples/form/api.vue
index e367cb85..a7e15a08 100644
--- a/playground/src/views/examples/form/api.vue
+++ b/playground/src/views/examples/form/api.vue
@@ -134,7 +134,7 @@ function handleClick(
     }
     case 'componentRef': {
       // 获取下拉组件的实例，并调用它的focus方法
-      formApi.getFieldComponentRef<RefSelectProps>('fieldOptions')?.focus();
+      formApi.getFieldComponentRef<RefSelectProps>('fieldOptions')?.focus?.();
       break;
     }
     case 'disabled': {