From be208fe915e0c088cf0b8e352eb99aa4ce546513 Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Fri, 13 Dec 2024 11:18:45 +0800
Subject: [PATCH] fix: form support `disabledOnInputListener` (#5127)

* fix: form support `disabledOnInputListener`

* chore: docs update
---
 apps/web-ele/src/adapter/form.ts                         | 2 ++
 apps/web-ele/src/views/demos/form/basic.vue              | 1 +
 packages/@core/ui-kit/form-ui/src/config.ts              | 8 ++++++--
 .../@core/ui-kit/form-ui/src/form-render/form-field.vue  | 9 +++++++--
 packages/@core/ui-kit/form-ui/src/form-render/form.vue   | 2 ++
 packages/@core/ui-kit/form-ui/src/types.ts               | 6 ++++++
 6 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/apps/web-ele/src/adapter/form.ts b/apps/web-ele/src/adapter/form.ts
index 13ae9c42..214b8d8b 100644
--- a/apps/web-ele/src/adapter/form.ts
+++ b/apps/web-ele/src/adapter/form.ts
@@ -14,6 +14,8 @@ setupVbenForm<ComponentType>({
       Upload: 'fileList',
       CheckboxGroup: 'model-value',
     },
+    // select等组件的筛选功能会抛出input事件，需要禁用表单的input事件监听以免错误地更新了组件值
+    disabledOnInputListener: true,
   },
   defineRules: {
     required: (value, _params, ctx) => {
diff --git a/apps/web-ele/src/views/demos/form/basic.vue b/apps/web-ele/src/views/demos/form/basic.vue
index 90aaccef..771665a6 100644
--- a/apps/web-ele/src/views/demos/form/basic.vue
+++ b/apps/web-ele/src/views/demos/form/basic.vue
@@ -139,6 +139,7 @@ const [Form, formApi] = useVbenForm({
       fieldName: 'select',
       label: 'Select',
       componentProps: {
+        filterable: true,
         options: [
           { value: 'A', label: '选项A' },
           { value: 'B', label: '选项B' },
diff --git a/packages/@core/ui-kit/form-ui/src/config.ts b/packages/@core/ui-kit/form-ui/src/config.ts
index 36e11d39..5dec2c3b 100644
--- a/packages/@core/ui-kit/form-ui/src/config.ts
+++ b/packages/@core/ui-kit/form-ui/src/config.ts
@@ -44,11 +44,15 @@ export function setupVbenForm<
 >(options: VbenFormAdapterOptions<T>) {
   const { config, defineRules } = options;
 
-  const { disabledOnChangeListener = false, emptyStateValue = undefined } =
-    (config || {}) as FormCommonConfig;
+  const {
+    disabledOnChangeListener = false,
+    disabledOnInputListener = false,
+    emptyStateValue = undefined,
+  } = (config || {}) as FormCommonConfig;
 
   Object.assign(DEFAULT_FORM_COMMON_CONFIG, {
     disabledOnChangeListener,
+    disabledOnInputListener,
     emptyStateValue,
   });
 
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
index e9ee8f87..d2a09f79 100644
--- a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
+++ b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
@@ -33,6 +33,7 @@ const {
   description,
   disabled,
   disabledOnChangeListener,
+  disabledOnInputListener,
   emptyStateValue,
   fieldName,
   formFieldProps,
@@ -227,10 +228,14 @@ function fieldBindEvent(slotProps: Record<string, any>) {
 
             return onChange?.(e?.target?.[bindEventField] ?? e);
           },
-      onInput: () => {},
+      ...(disabledOnInputListener ? { onInput: undefined } : {}),
     };
   }
-  return {};
+  return disabledOnInputListener
+    ? {
+        onInput: undefined,
+      }
+    : {};
 }
 
 function createComponentProps(slotProps: Record<string, any>) {
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form.vue b/packages/@core/ui-kit/form-ui/src/form-render/form.vue
index 348f03d8..4b727416 100644
--- a/packages/@core/ui-kit/form-ui/src/form-render/form.vue
+++ b/packages/@core/ui-kit/form-ui/src/form-render/form.vue
@@ -90,6 +90,7 @@ const computedSchema = computed(
       controlClass = '',
       disabled,
       disabledOnChangeListener = false,
+      disabledOnInputListener = false,
       emptyStateValue = undefined,
       formFieldProps = {},
       formItemClass = '',
@@ -111,6 +112,7 @@ const computedSchema = computed(
       return {
         disabled,
         disabledOnChangeListener,
+        disabledOnInputListener,
         emptyStateValue,
         hideLabel,
         hideRequiredMark,
diff --git a/packages/@core/ui-kit/form-ui/src/types.ts b/packages/@core/ui-kit/form-ui/src/types.ts
index 2f8a7be7..9e3004a2 100644
--- a/packages/@core/ui-kit/form-ui/src/types.ts
+++ b/packages/@core/ui-kit/form-ui/src/types.ts
@@ -154,6 +154,11 @@ export interface FormCommonConfig {
    * @default false
    */
   disabledOnChangeListener?: boolean;
+  /**
+   * 是否禁用所有表单项的input事件监听
+   * @default false
+   */
+  disabledOnInputListener?: boolean;
   /**
    * 所有表单项的空状态值,默认都是undefined，naive-ui的空状态值是null
    */
@@ -371,6 +376,7 @@ export interface VbenFormAdapterOptions<
   config?: {
     baseModelPropName?: string;
     disabledOnChangeListener?: boolean;
+    disabledOnInputListener?: boolean;
     emptyStateValue?: null | undefined;
     modelPropNameMap?: Partial<Record<T, string>>;
   };