fix: form support disabledOnInputListener (#5127)

* fix: form support `disabledOnInputListener` * chore: docs update
vbenjs · Dec 13, 2024 · be208fe · be208fe
1 parent 1d3729a
commit be208fe
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>>;
   };