使用antd Form时聚焦Input自动滚动到表单底部，如何禁用？

问题修复方案 #

这个问题大多由以下几个原因导致，按优先级排查修改即可： #

1. 移除输入框的动态随机ID（最高概率诱因） #

你的代码中InputNumber组件使用了每次渲染都会重新生成的随机字符串作为ID：id={quantity_${generateRandomString()}}。输入框聚焦时会触发组件状态更新导致重渲染，ID发生变化后浏览器无法定位到原聚焦元素，就会默认滚动到页面底部。
修改方案：替换为固定ID，或用业务唯一标识（如商品ID、表单项name属性）拼接ID，保证同个表单项每次渲染的ID一致：

<InputNumber
  onFocus={(e) => gtmFormFunction("quantity", e)}
  onChange={(value) => checkQuantityVal(value)}
  autoComplete="dontshow"
  // 替换为固定ID，多实例场景可用业务唯一值拼接
  id="quantity"
  className={'input112'}
/>

2. 调整Form校验滚动配置 #

你当前给Form组件开启了scrollToFirstError属性，默认仅在提交失败时滚动到第一个错误项，如果你手动修改了表单项的校验触发时机为onFocus，聚焦触发校验时如果出现规则不匹配，就会触发滚动。
修改方案：

• 若不需要提交失败自动滚动到错误项，直接移除scrollToFirstError属性，或设置为scrollToFirstError={false}
• 若需要保留提交失败的滚动逻辑，给表单项指定校验触发时机，排除onFocus：

<Form.Item
  name="quantity"
  style={{ marginBottom: "1em" }}
  // 仅在失焦、内容变更时触发校验
  validateTrigger={['onBlur', 'onChange']}
  rules={[
    // 原有规则不变
  ]}
>

3. 排查自定义逻辑副作用 #

检查你自定义的gtmFormFunction聚焦回调函数，确认内部没有调用滚动相关的API（如window.scrollTo、scrollIntoView等），如果有可对应调整。

内容的提问来源于stack exchange，提问作者Jyoti Duhan