From 6e40c534f447d541360349e62319c6866a76ae9a Mon Sep 17 00:00:00 2001
From: oasis <12181600+oasis-cloud@users.noreply.github.com>
Date: Fri, 1 Mar 2024 16:03:06 +0800
Subject: [PATCH] fix(form): after setting validateTrigger, `trigger` should be
 excluded (#1963)

---
 src/packages/form/__tests__/form.spec.tsx | 46 +++++++++++++++++++++++
 src/packages/form/demo.taro.tsx           | 15 ++++++++
 src/packages/form/demo.tsx                | 15 ++++++++
 src/packages/form/doc.en-US.md            | 33 +++++++++++++++-
 src/packages/form/doc.md                  | 31 +++++++++++++++
 src/packages/form/doc.taro.md             | 31 +++++++++++++++
 src/packages/form/doc.zh-TW.md            | 33 +++++++++++++++-
 src/packages/formitem/formitem.taro.tsx   |  4 +-
 src/packages/formitem/formitem.tsx        |  4 +-
 9 files changed, 206 insertions(+), 6 deletions(-)

diff --git a/src/packages/form/__tests__/form.spec.tsx b/src/packages/form/__tests__/form.spec.tsx
index 71a0aa2b21..5758c58aa2 100644
--- a/src/packages/form/__tests__/form.spec.tsx
+++ b/src/packages/form/__tests__/form.spec.tsx
@@ -22,6 +22,52 @@ test('form set initialValues', () => {
   )
 })
 
+test('form validateTrigger', async () => {
+  const { container, rerender } = render(
+    <Form>
+      <Form.Item
+        label="字段A"
+        name="username"
+        required
+        validateTrigger="onBlur"
+        rules={[{ required: true, message: '请输入字段A' }]}
+      >
+        <Input placeholder="请输入字段A" type="text" />
+      </Form.Item>
+    </Form>
+  )
+  const input = container.querySelector('.nut-input-native')
+  if (input) {
+    fireEvent.focus(input)
+    fireEvent.blur(input)
+    await waitFor(() => {
+      const errorMessage = container.querySelector('.nut-form-item-body-tips')
+      expect(errorMessage).toBeTruthy()
+    })
+  }
+  rerender(
+    <Form initialValues={{ username: 'NutUI-React' }}>
+      <Form.Item
+        label="字段A"
+        name="username"
+        required
+        validateTrigger={['onBlur']}
+        rules={[{ required: true, message: '请输入字段A' }]}
+      >
+        <Input placeholder="请输入字段A" type="text" />
+      </Form.Item>
+    </Form>
+  )
+  if (input) {
+    fireEvent.focus(input)
+    fireEvent.blur(input)
+    await waitFor(() => {
+      const errorMessage = container.querySelector('.nut-form-item-body-tips')
+      expect(errorMessage).toBeTruthy()
+    })
+  }
+})
+
 test('useForm', () => {
   const App = () => {
     const [form] = Form.useForm()
diff --git a/src/packages/form/demo.taro.tsx b/src/packages/form/demo.taro.tsx
index d4f1b0bb31..000a07e06a 100644
--- a/src/packages/form/demo.taro.tsx
+++ b/src/packages/form/demo.taro.tsx
@@ -79,6 +79,7 @@ const FormDemo = () => {
       radioOption: '选项',
       picker: '选择器',
       select: '请选择',
+      validateTrigger: '校验触发时机',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -137,6 +138,7 @@ const FormDemo = () => {
       radioOption: 'radio',
       picker: 'Picker',
       select: 'Please select',
+      validateTrigger: 'Validate Trigger',
     },
   })
   const [state, SetState] = useState({
@@ -475,6 +477,19 @@ const FormDemo = () => {
           </Form.Item>
         </Form>
 
+        <h2>{translated.validateTrigger}</h2>
+        <Form>
+          <Form.Item
+            label={translated.name}
+            name="username"
+            required
+            validateTrigger="onBlur"
+            rules={[{ required: true, message: translated.nameTip }]}
+          >
+            <Input placeholder={translated.nameTip1} type="text" />
+          </Form.Item>
+        </Form>
+
         <h2>{translated.title5}</h2>
         <Form
           style={{ '--nutui-form-item-label-width': '120px' }}
diff --git a/src/packages/form/demo.tsx b/src/packages/form/demo.tsx
index 532c79e4f1..b9128c2813 100644
--- a/src/packages/form/demo.tsx
+++ b/src/packages/form/demo.tsx
@@ -75,6 +75,7 @@ const FormDemo = () => {
       radioOption: '选项',
       picker: '选择器',
       select: '请选择',
+      validateTrigger: '校验触发时机',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -133,6 +134,7 @@ const FormDemo = () => {
       radioOption: 'radio',
       picker: 'Picker',
       select: 'Please select',
+      validateTrigger: 'Validate Trigger',
     },
   })
 
@@ -431,6 +433,19 @@ const FormDemo = () => {
           </Form.Item>
         </Form>
 
+        <h2>{translated.validateTrigger}</h2>
+        <Form>
+          <Form.Item
+            label={translated.name}
+            name="username"
+            required
+            validateTrigger="onBlur"
+            rules={[{ required: true, message: translated.nameTip }]}
+          >
+            <Input placeholder={translated.nameTip1} type="text" />
+          </Form.Item>
+        </Form>
+
         <h2>{translated.title5}</h2>
         <Form
           style={{ '--nutui-form-item-label-width': '120px' }}
diff --git a/src/packages/form/doc.en-US.md b/src/packages/form/doc.en-US.md
index fcae7c18fb..74eb654e81 100644
--- a/src/packages/form/doc.en-US.md
+++ b/src/packages/form/doc.en-US.md
@@ -339,7 +339,38 @@ export default App;
 
 :::
 
-### form type
+### Validate Trigger 
+
+:::demo
+
+```tsx
+import React from "react";
+import { Form, Input } from '@nutui/nutui-react';
+
+const App = () => {
+  return (
+    <>
+      <Form>
+        <Form.Item
+          label="Field A"
+          name="username"
+          required
+          validateTrigger="onBlur"
+          rules={[{ required: true, message: "Place Input Field A" }]}
+        >
+          <Input placeholder="Place Input Field A" type="text" />
+        </Form.Item>
+      </Form>
+    </>
+  )
+}
+
+export default App;
+```
+
+:::
+
+### Form Type
 
 :::demo
 
diff --git a/src/packages/form/doc.md b/src/packages/form/doc.md
index 69d790bb21..12f3e7dd24 100644
--- a/src/packages/form/doc.md
+++ b/src/packages/form/doc.md
@@ -334,6 +334,37 @@ export default App;
 
 :::
 
+### 校验触发时机
+
+:::demo
+
+```tsx
+import React from "react";
+import { Form, Input } from '@nutui/nutui-react';
+
+const App = () => {
+  return (
+    <>
+      <Form>
+        <Form.Item
+          label="字段A"
+          name="username"
+          required
+          validateTrigger="onBlur"
+          rules={[{ required: true, message: "请输入字段A" }]}
+        >
+          <Input placeholder="请输入字段A" type="text" />
+        </Form.Item>
+      </Form>
+    </>
+  )
+}
+
+export default App;
+```
+
+:::
+
 ### 表单类型
 
 :::demo
diff --git a/src/packages/form/doc.taro.md b/src/packages/form/doc.taro.md
index 15367b55cd..9d4dc8c6aa 100644
--- a/src/packages/form/doc.taro.md
+++ b/src/packages/form/doc.taro.md
@@ -340,6 +340,37 @@ export default App;
 
 :::
 
+### 校验触发时机
+
+:::demo
+
+```tsx
+import React from "react";
+import { Form, Input } from '@nutui/nutui-react-taro';
+
+const App = () => {
+  return (
+    <>
+      <Form>
+        <Form.Item
+          label="字段A"
+          name="username"
+          required
+          validateTrigger="onBlur"
+          rules={[{ required: true, message: "请输入字段A" }]}
+        >
+          <Input placeholder="请输入字段A" type="text" />
+        </Form.Item>
+      </Form>
+    </>
+  )
+}
+
+export default App;
+```
+
+:::
+
 ### 表单类型
 
 :::demo
diff --git a/src/packages/form/doc.zh-TW.md b/src/packages/form/doc.zh-TW.md
index 9fabc9457f..78e93bea78 100644
--- a/src/packages/form/doc.zh-TW.md
+++ b/src/packages/form/doc.zh-TW.md
@@ -332,7 +332,38 @@ export default App;
 
 :::
 
-### 錶單類型
+### 校驗觸發時機
+
+:::demo
+
+```tsx
+import React from "react";
+import { Form, Input } from '@nutui/nutui-react';
+
+const App = () => {
+  return (
+    <>
+      <Form>
+        <Form.Item
+          label="欄位A"
+          name="username"
+          required
+          validateTrigger="onBlur"
+          rules={[{ required: true, message: "請輸入欄位A" }]}
+        >
+          <Input placeholder="請輸入欄位A" type="text" />
+        </Form.Item>
+      </Form>
+    </>
+  )
+}
+
+export default App;
+```
+
+:::
+
+### 表單類型
 
 :::demo
 
diff --git a/src/packages/formitem/formitem.taro.tsx b/src/packages/formitem/formitem.taro.tsx
index a26b9eabbb..c699c74995 100644
--- a/src/packages/formitem/formitem.taro.tsx
+++ b/src/packages/formitem/formitem.taro.tsx
@@ -123,8 +123,8 @@ export class FormItem extends React.Component<
     if (validateTrigger) {
       validateTriggers =
         typeof validateTrigger === 'string'
-          ? [...validateTriggers, validateTrigger]
-          : [...validateTriggers, ...validateTrigger]
+          ? [validateTrigger]
+          : [...validateTrigger]
       validateTriggers.forEach((trigger) => {
         const originTrigger = controlled[trigger]
         controlled[trigger] = (...args: any) => {
diff --git a/src/packages/formitem/formitem.tsx b/src/packages/formitem/formitem.tsx
index 17fb63a46f..8d47ba36fa 100644
--- a/src/packages/formitem/formitem.tsx
+++ b/src/packages/formitem/formitem.tsx
@@ -123,8 +123,8 @@ export class FormItem extends React.Component<
     if (validateTrigger) {
       validateTriggers =
         typeof validateTrigger === 'string'
-          ? [...validateTriggers, validateTrigger]
-          : [...validateTriggers, ...validateTrigger]
+          ? [validateTrigger]
+          : [...validateTrigger]
       validateTriggers.forEach((trigger) => {
         const originTrigger = controlled[trigger]
         controlled[trigger] = (...args: any) => {