fix: 修复有单位时默认值不对,点击事件阻止冒泡 (#9218)

Co-authored-by: liujintao03 <liujintao03@baidu.com>

packages/amis-ui/src/components/NumberInput.tsx

@@ -240,7 +240,16 @@ export class NumberInput extends React.Component<NumberProps, NumberState> {
   }
 
   @autobind
-  handleEnhanceModeChange(action: 'add' | 'subtract'): void {
+  handleClick(e: React.SyntheticEvent<HTMLElement>) {
+    e.stopPropagation();
+  }
+
+  @autobind
+  handleEnhanceModeChange(
+    action: 'add' | 'subtract',
+    e: React.MouseEvent
+  ): void {
+    e.stopPropagation();
     const {value, step = 1, disabled, readOnly, precision} = this.props;
     // value为undefined会导致溢出错误
     let val = value || 0;
@@ -342,6 +351,7 @@ export class NumberInput extends React.Component<NumberProps, NumberState> {
         disabled={disabled}
         placeholder={placeholder}
         onFocus={this.handleFocus}
+        onClick={this.handleClick}
         onBlur={this.handleBlur}
         stringMode={this.isBig ? true : false}
         keyboard={keyboard}
@@ -386,7 +396,7 @@ export class NumberInput extends React.Component<NumberProps, NumberState> {
                 disabled ? 'Number--enhance-border-disabled' : '',
                 readOnly ? 'Number--enhance-border-readOnly' : ''
               )}
-              onClick={() => this.handleEnhanceModeChange('subtract')}
+              onClick={e => this.handleEnhanceModeChange('subtract', e)}
             >
               <Icon
                 icon="minus"
@@ -403,7 +413,7 @@ export class NumberInput extends React.Component<NumberProps, NumberState> {
                 disabled ? 'Number--enhance-border-disabled' : '',
                 readOnly ? 'Number--enhance-border-readOnly' : ''
               )}
-              onClick={() => this.handleEnhanceModeChange('add')}
+              onClick={e => this.handleEnhanceModeChange('add', e)}
             >
               <Icon
                 icon="plus"

packages/amis/__tests__/renderers/Form/number.test.tsx

@@ -21,6 +21,17 @@ const setup = async (
   formOptions: any = {},
   formItems: any[] = [{}]
 ) => {
+  const fetcher = jest.fn().mockImplementation(() =>
+    Promise.resolve({
+      data: {
+        status: 0,
+        msg: 'ok',
+        data: {
+          id: '12'
+        }
+      }
+    })
+  );
   const utils = render(
     amisRender(
       {
@@ -39,7 +50,9 @@ const setup = async (
         ...formOptions
       },
       {},
-      makeEnv()
+      makeEnv({
+        fetcher
+      })
     )
   );
 
@@ -185,6 +198,47 @@ test('Renderer:number with unitOptions', async () => {
   expect(container).toMatchSnapshot();
 });
 
+test('Renderer:number with unitOptions and default value', async () => {
+  const {container} = await setup(
+    {
+      unitOptions: ['px', '%', 'em'],
+      value: 12
+    },
+    {},
+    [
+      {
+        type: 'static',
+        name: 'number'
+      }
+    ]
+  );
+
+  const staticDom = container.querySelector('.cxd-PlainField') as Element;
+  expect(staticDom.innerHTML).toBe('12px');
+});
+
+test('Renderer:number with unitOptions and initApi', async () => {
+  const {container} = await setup(
+    {
+      name: 'id',
+      unitOptions: ['px', '%', 'em']
+    },
+    {
+      initApi: '/amis/api/mock2/sample/12'
+    },
+    [
+      {
+        type: 'static',
+        name: 'id'
+      }
+    ]
+  );
+  await wait(500); // 等待 initApi 加载完
+
+  const staticDom = container.querySelector('.cxd-PlainField') as Element;
+  expect(staticDom.innerHTML).toBe('12px');
+});
+
 test('Renderer:number with precision and default value', async () => {
   const {input, wrap, container, getByText} = await setup({
     precision: 2,

packages/amis/src/renderers/Form/InputNumber.tsx

@@ -348,10 +348,19 @@ export default class NumberControl extends React.Component<
   }
 
   componentDidUpdate(prevProps: NumberProps) {
+    const unit = this.getUnit();
+    const value = this.props.value;
+    if (
+      value != null &&
+      (typeof value === 'string' || typeof value === 'number') &&
+      unit &&
+      !String(value).endsWith(unit)
+    ) {
+      this.props.setPrinstineValue(this.getValue(value));
+    }
     // 匹配 数字 + ?字符
     const reg = /^([-+]?(([1-9]\d*\.?\d*)|(0\.\d*[1-9]))[^\d\.]*)$/;
     if (reg.test(this.props.value) && this.props.value !== prevProps.value) {
-      const unit = this.getUnit();
       this.setState({unit: unit});
     }