fix(form-item): fixed an issue where validation would fail to trigger after continuous input when form items were configured with validation stabilization and the focus would quickly drop. (#4038)

* fix(form-item): 修复当表单项配置了校验防抖，在连续输入后快速失焦无法触发校验的问题

* fix(form): update role for date and time pickers in basic usage tests

Author: zzcr

examples/sites/demos/pc/app/form/basic-usage.spec.ts

@@ -18,15 +18,17 @@ test('测试基本表单', async ({ page }) => {
   await decreaseIcon.click()
   await expect(numericInput).toHaveValue('0')
 
-  // 日期选择器
-  const datePicker = demo.getByRole('textbox').first()
+  // 日期选择器（PR #4028 后，role 从 textbox 改为 combobox）
+  const datePicker = demo.getByRole('combobox').first()
   await datePicker.click()
+  await page.waitForTimeout(200) // 等待弹出层显示
   await page.getByRole('cell', { name: '15' }).getByText('15').click()
   await expect(datePicker).toHaveValue(/15/)
 
-  // 時間选择器
-  const timePicker = demo.getByRole('combobox').nth(0)
+  // 时间选择器
+  const timePicker = demo.getByRole('combobox').nth(1) // 第二个 combobox（第一个是日期选择器）
   await timePicker.click()
+  await page.waitForTimeout(200) // 等待下拉列表显示
   await page.getByRole('option').filter({ hasText: '00:30' }).click()
   await expect(timePicker).toHaveValue('00:30')
 

packages/renderless/src/form-item/index.ts

@@ -416,10 +416,12 @@ export const getFilteredRule =
       .map((rule) => merge({}, rule))
   }
 
+// blur 事件触发时，直接调用原始的 validate 函数，不应用防抖
 export const onFieldBlur = (api: IFormItemRenderlessParams['api']) => (): void => {
-  api.validate('blur')
+  api.validateOrigin('blur')
 }
 
+// change 事件触发时，调用可能被防抖包装的 validate 函数
 export const onFieldChange =
   ({ api, state }: Pick<IFormItemRenderlessParams, 'api' | 'state'>) =>
   (): void => {

packages/renderless/src/form-item/vue.ts

@@ -56,6 +56,7 @@ import type {
 export const api = [
   'state',
   'validate',
+  'validateOrigin',
   'clearValidate',
   'resetField',
   'getRules',
@@ -144,6 +145,9 @@ const initState = ({
 }
 
 const initApi = ({ api, state, dispatch, broadcast, props, constants, vm, t, nextTick, slots }) => {
+  // 创建原始的 validate 函数（不经过防抖处理）
+  const validateOriginFunc = validate({ api, props, state, t })
+
   Object.assign(api, {
     state,
     dispatch,
@@ -172,7 +176,8 @@ const initApi = ({ api, state, dispatch, broadcast, props, constants, vm, t, nex
     onFieldBlur: onFieldBlur(api),
     onFieldChange: onFieldChange({ api, state }),
     addValidateEvents: addValidateEvents({ api, vm, props, state }),
-    validate: wrapValidate({ validateFunc: validate({ api, props, state, t }), props }),
+    validateOrigin: validateOriginFunc,
+    validate: wrapValidate({ validateFunc: validateOriginFunc, props }),
     getDisplayedValue: getDisplayedValue({ state }),
     clearDisplayedValue: clearDisplayedValue({ state }),
     handleLabelMouseenter: handleLabelMouseenter({ props, state, slots }),

packages/renderless/types/form-item.type.ts

@@ -144,6 +144,7 @@ export interface IFormItemApi {
   onFieldChange: ReturnType<typeof onFieldChange>
   addValidateEvents: ReturnType<typeof addValidateEvents>
   validate: ReturnType<typeof validate>
+  validateOrigin: ReturnType<typeof validate> // 原始的 validate 函数，不经过防抖处理
   getDisplayedValue: ReturnType<typeof getDisplayedValue>
   clearDisplayedValue: ReturnType<typeof clearDisplayedValue>
   handleMouseenter: ReturnType<typeof handleMouseenter>