fix(form): Fix the issue of the ProFormMoney component causing duplic…

…ate currency symbols when using trigger=onBlur close #6779
ant-design · Jul 16, 2023 · bc94215 · bc94215
1 parent 76470d8
commit bc94215
Show file tree

Hide file tree

Showing 5 changed files with 209 additions and 602 deletions.
diff --git a/packages/field/src/components/Digit/index.tsx b/packages/field/src/components/Digit/index.tsx
@@ -42,7 +42,7 @@ const FieldDigit: ProFieldFC<FieldDigitProps> = (
       ) {
         val = Number(val.toFixed(fieldProps.precision));
       }
-      return fieldProps?.onChange?.(val);
+      return val;
     },
     [fieldProps],
   );
@@ -72,8 +72,9 @@ const FieldDigit: ProFieldFC<FieldDigitProps> = (
         ref={ref}
         min={0}
         placeholder={placeholderValue}
-        {...omit(fieldProps, ['onChange'])}
-        onChange={proxyChange}
+        {...omit(fieldProps, ['onChange', 'onBlur'])}
+        onChange={(e) => fieldProps?.onChange?.(proxyChange(e))}
+        onBlur={(e) => fieldProps?.onBlur?.(proxyChange(e.target.value))}
       />
     );
     if (renderFormItem) {

diff --git a/packages/field/src/components/Money/index.tsx b/packages/field/src/components/Money/index.tsx
@@ -403,6 +403,20 @@ const FieldMoney: ProFieldFC<FieldMoneyProps> = (
           'visible',
           'open',
         ])}
+        onBlur={
+          fieldProps.onBlur
+            ? (e) => {
+                let value = e.target.value;
+                if (moneySymbol && value) {
+                  value = value.replace(
+                    new RegExp(`\\${moneySymbol}\\s?|(,*)`, 'g'),
+                    '',
+                  );
+                }
+                fieldProps.onBlur?.(value);
+              }
+            : undefined
+        }
       />
     );
 

diff --git a/packages/form/src/components/FieldSet/index.tsx b/packages/form/src/components/FieldSet/index.tsx
@@ -110,7 +110,7 @@ const FieldSet: React.FC<ProFormFieldSetProps> = ({
 
   const Wrapper: React.FC = useCallback(
     ({ children: dom }: { children?: React.ReactNode }) => (
-      <Components {...typeProps} {...(space as SpaceProps)} align="start">
+      <Components {...typeProps} {...(space as SpaceProps)} align="start" wrap>
         {dom}
       </Components>
     ),

diff --git a/packages/form/src/demos/money.tsx b/packages/form/src/demos/money.tsx
@@ -71,6 +71,7 @@ export default () => {
         locale="en-US"
         initialValue={22.22}
         min={0}
+        trigger="onBlur"
       />
       <ProFormMoney
         label="不限制金额大小"