fix: 修复 Form 在按回车提交表单时表单中 Input 组件 trim 功能失效的问题 (#871)

* fix: 修复 `Form` 在按回车提交表单时表单中 `Input` 组件 `trim` 功能失效的问题 --------- Co-authored-by: 颜宇浩 <[email protected]>
sheinsight · Dec 16, 2024 · 32c4ff7 · 32c4ff7
1 parent 7921b68
commit 32c4ff7
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 161 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sheinx",
   "private": true,
-  "version": "3.5.5-beta.1",
+  "version": "3.5.5-beta.2",
   "description": "A react library developed with sheinx",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/packages/hooks/src/components/use-form/use-form.ts b/packages/hooks/src/components/use-form/use-form.ts
@@ -360,6 +360,9 @@ const useForm = <T extends ObjectType>(props: UseFormProps<T>) => {
       return;
     }
     context.submitLock = true;
+    const activeEl = document.activeElement as HTMLElement;
+    if (activeEl) activeEl.blur();
+
     setTimeout(() => {
       // 防止连续点击
       context.submitLock = false;
@@ -372,6 +375,7 @@ const useForm = <T extends ObjectType>(props: UseFormProps<T>) => {
       const result = await validateFields(undefined, { ignoreBind: true }).catch((e) => e);
       if (result === true) {
         props.onSubmit?.((context.value ?? {}) as T);
+        if (activeEl) activeEl.focus();
       } else {
         handleSubmitError(result);
         return;

diff --git a/packages/shineout/src/form/__doc__/changelog.cn.md b/packages/shineout/src/form/__doc__/changelog.cn.md
@@ -1,3 +1,9 @@
+## 3.5.5-beta.2
+2024-12-16
+
+### 🐞 BugFix
+- 修复 `Form` 在按回车提交表单时表单中 `Input` 组件 `trim` 功能失效的问题 ([#871](https://github.com/sheinsight/shineout-next/pull/871))
+
 ## 3.5.4
 2024-12-12
 

diff --git a/packages/shineout/src/form/__example__/test-001-base-form.tsx b/packages/shineout/src/form/__example__/test-001-base-form.tsx
@@ -4,169 +4,15 @@
  * en - Test Form
  *    -- Test Form
  */
-import { useState, useEffect } from 'react';
-import { Form, Input, Rule, DatePicker, Divider } from 'shineout';
-
-const NameInput = (props) => {
-  const { value, onChange } = props;
-
-  const handleChange = (v, index) => {
-    const nextValue = [...value];
-    nextValue[index] = v;
-    // console.log('nextValue', nextValue);
-    onChange(nextValue);
-  };
-
-  return (
-    <Input.Group>
-      <Input value={value![0]} width={120} onChange={(v) => handleChange(v, 0)} clearable />
-      <Input value={value![1]} width={120} onChange={(v) => handleChange(v, 1)} clearable />
-    </Input.Group>
-  );
-};
-
-const A = () => {
-  const [value, setValue] = useState({});
-
-  const handleSubmit = (v) => {
-    console.log('submit', v);
-  };
-
-  const handleChange = (v) => {
-    console.log('onChange', v);
-    setValue(v);
-  };
-
-  const handleReset = () => {};
-
-  // 模拟调用接口后，把 Form.FieldSed 的 defaultValue 字段值干掉，换句话说让首次初始化白干了
-  const initValue = () => {
-    setTimeout(() => {
-      setValue({ b: '233' });
-      console.log('init complated');
-    }, 3000);
-  };
-
-  useEffect(() => {
-    initValue();
-  }, []);
-
-  return (
-    <div>
-      <Form value={value} onChange={handleChange} onReset={handleReset} onSubmit={handleSubmit}>
-        <Form.Item label='a'>
-          <Form.FieldSet name='a' defaultValue={[{}]}>
-            {() => {
-              return (
-                <div>
-                  <Input name='a1'></Input>
-                  <Input name='a2'></Input>
-                </div>
-              );
-            }}
-          </Form.FieldSet>
-        </Form.Item>
-
-        <Form.Item label='' style={{ marginTop: 32, marginBottom: 0 }}>
-          <Form.Submit>Submit</Form.Submit>
-          <Form.Reset>Reset</Form.Reset>
-        </Form.Item>
-      </Form>
-    </div>
-  );
-};
-
-const B = () => {
-  const [value, setValue] = useState({
-    nameObj: {
-      firstName: 'Harry1',
-      lastName: 'Potter2',
-    },
-  });
-
-  const handleSubmit = (v) => {
-    console.log('submit', v);
-  };
-
-  const handleChange = (v) => {
-    console.log(v);
-    setValue(v);
-  };
-
-  const handleReset = () => {};
-
-  return (
-    <div>
-      <Form value={value} onChange={handleChange} onReset={handleReset} onSubmit={handleSubmit}>
-        <Form.Field name={['nameObj.firstName', 'nameObj.lastName']}>
-          <NameInput />
-        </Form.Field>
-
-        <Form.Item label='' style={{ marginTop: 32, marginBottom: 0 }}>
-          <Form.Submit>Submit</Form.Submit>
-          <Form.Reset>Reset</Form.Reset>
-        </Form.Item>
-      </Form>
-    </div>
-  );
-};
-
-const C = () => {
-  const [value, setValue] = useState({
-    formValue: {
-      email: '',
-      password: '',
-    },
-  });
-
-  const rules = Rule({
-    isDisabled: (v, formV, callback, p) => {
-      console.log('rule', formV);
-      callback(true);
-    },
-  });
+import { Form, Input } from 'shineout';
 
+export default () => {
   return (
-    <Form
-      labelWidth={65}
-      value={value}
-      onChange={(v) => {
-        setValue(v);
-      }}
-    >
-      <Form.Item label='Email'>
-        <Input
-          name='formValue.email'
-          clearable
-          rules={[
-            rules.required,
-            (_, formData, cb) => {
-              console.log('formData', formData);
-              cb(true);
-            },
-          ]}
-        />
-      </Form.Item>
+    <Form onSubmit={(v) => console.log(v)}>
+      <Input name='name' trim></Input>
 
-      <Form.Item label='Password'>
-        <Input name='formValue.password' type='password' clearable />
-      </Form.Item>
-
-      <Form.Item>
-        <DatePicker rules={[rules.isDisabled]} range name={['start', 'end']}></DatePicker>
-      </Form.Item>
+      <Form.Submit>Submit</Form.Submit>
+      <Form.Reset>Reset</Form.Reset>
     </Form>
   );
 };
-
-export default () => {
-  return (
-    <>
-      <A></A>
-      <Divider></Divider>
-      <B></B>
-      <Divider></Divider>
-      <C></C>
-    </>
-  );
-};