🐛[BUG]ProForm元素和colProps一起的时候会导致监听变动内部的setState调用后失焦

[lyjyiran]

import { ProForm, ProFormText } from '@ant-design/pro-form';

import { useState } from 'react';

export default () => {
  const [message, setMessage] = useState<string>('');

  return (
    <div
      style={{
        width: '400px',
        margin: '100px auto',
        padding: '29px',
        border: '1px solid #eee',
      }}
    >
      <ProForm grid={true}>
        <ProFormText name="x" />
        <ProFormText
          name="y"
          fieldProps={{
            onChange: (e) => {
              setMessage(e.target.value);
            },
          }}
          colProps={{ xs: 24 }}  // 去掉这行后正常
        />
      </ProForm>
      <br />
      {message}
    </div>
  );
};

import { ProForm, ProFormText } from '@ant-design/pro-form';

import { useState } from 'react';

export default () => {
  const [message, setMessage] = useState<string>('');

  return (
    <div
      style={{
        width: '400px',
        margin: '100px auto',
        padding: '29px',
        border: '1px solid #eee',
      }}
    >
      <ProForm
        grid={true}
        onValuesChange={(values) => {
          if (values.y !== undefined) {
            setMessage(values.y);
          }
        }}
      >
        <ProFormText name="x" />
        <ProFormText
          name="y"
          colProps={{ xs: 24 }} // 去掉这行后正常
        />
      </ProForm>
      <br />
      {message}
    </div>
  );
};

import { ProForm, ProFormText, ProFormDependency } from '@ant-design/pro-form';

import { useState } from 'react';

export default () => {
  const [message, setMessage] = useState<string>('');

  return (
    <div
      style={{
        width: '400px',
        margin: '100px auto',
        padding: '29px',
        border: '1px solid #eee',
      }}
    >
      <ProForm grid={true}>
        <ProFormText name="x" />
        <ProFormText
          name="y"
          colProps={{ xs: 24 }} // 去掉这行后正常
        />
        <ProFormDependency name={['y']}>
          {({ y }) => {
            if (y !== undefined) {
              setMessage(y);
            }
          }}
        </ProFormDependency>
      </ProForm>
      <br />
      {message}
    </div>
  );
};

https://user-images.githubusercontent.com/9164855/168892891-9af9a056-9ded-42ed-b54e-b3770ac5eb3a.mp4

目前发现把

        <ProFormText
          name="y"
          colProps={{ xs: 24 }} 
 ...
/>

换成原生antd的

       <Col xs={24}>
          <ProForm.Item name="y">
            <Input />
          </ProForm.Item>
        </Col>

上面三种方式都不会跳焦点了

[yxf18]

有同样的问题？楼主解决了么？

[chenshuai2144]

colProps 触发了dom重新render了吧