对Sender组件的prefix的任何点击事件都会导致Sender被focus

[karthest]

重现步骤

在线示例链接：（必填）
https://codesandbox.io/p/sandbox/k6jzd7
步骤：

1. 使用Sender
2. 设置Sender的prefix
3. 点击Sender的prefix

当前行为

Sender被focus,且无法通过e.stopPropagation;e.preventDefault()阻止该行为

预期行为

不会导致Sender被focus和无法通过e.stopPropagation;e.preventDefault()阻止该行为

上下文

期望改变这一行为

版本

1.4.0

您在哪些浏览器上遇到了这个问题？

Chrome

[petercat-assistant]

在 ant-design/x 仓库中，我找到了一个与您描述的问题相同的已报告问题：Issue #893。这个问题描述与您提供的情况一致。

目前，您可以在这个问题的页面上查看是否有任何更新或解决方案。如果您有进一步的疑问或需要更多帮助，请随时告诉我。

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

[dosubot]

Hi @karthest! I'm Dosu and I’m helping the x team.

关于 Sender 组件 prefix 区域点击会导致输入框 focus 的问题，经过对源码和文档的分析，目前的行为是由 Sender 组件内部的 onMouseDown 事件处理逻辑决定的：只要点击了内容区域（包括 prefix），就会自动 focus 到输入框，并且这个 focus 行为是在捕获阶段由容器统一处理的，而不是 prefix 自身的点击事件处理【详见实现源码】(https://github.com/ant-design/x/blob/aae133776529ee548da67c2f9ef03d6e8d724b4e/components/sender/index.tsx)。

这意味着仅在 prefix 上通过 onClick、onMouseDown 的 e.stopPropagation 或 e.preventDefault 并不能阻止输入框被 focus，因为 focus 逻辑是在父容器的 onMouseDown 里统一触发的。要阻止这种行为，必须在 prefix 的子元素（比如你自定义的按钮或图标）上绑定 onMouseDown，并在事件处理函数里调用 e.stopPropagation() 和 e.preventDefault()，这样事件就不会冒泡到父容器，父容器的 focus 逻辑也不会被触发。

示例代码：

<Sender
  prefix={
    <span
      onMouseDown={e => {
        e.stopPropagation();
        e.preventDefault();
        // 你自己的逻辑
      }}
    >
      {/* 你的 prefix 内容 */}
    </span>
  }
/>

目前没有查到已有的 issue 或讨论专门针对 prefix 点击导致 focus 的问题。该行为是组件设计上的默认实现，属于预期范围【源码说明】(https://github.com/ant-design/x/blob/aae133776529ee548da67c2f9ef03d6e8d724b4e/components/sender/index.tsx)。

如需彻底自定义 prefix 区域的行为，建议所有可交互的 prefix 子元素都加上 onMouseDown 并阻止事件冒泡。这样可以完全避免输入框被自动 focus。

To reply, just mention my name @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[karthest]

在 ant-design/x 仓库中，我找到了一个与您描述的问题相同的已报告问题：Issue #893。这个问题描述与您提供的情况一致。

目前，您可以在这个问题的页面上查看是否有任何更新或解决方案。如果您有进一步的疑问或需要更多帮助，请随时告诉我。

🪧 Tips

笨，893就是这个issue

[karthest]

Hi @karthest! I'm Dosu and I’m helping the x team.

关于 Sender 组件 prefix 区域点击会导致输入框 focus 的问题，经过对源码和文档的分析，目前的行为是由 Sender 组件内部的 onMouseDown 事件处理逻辑决定的：只要点击了内容区域（包括 prefix），就会自动 focus 到输入框，并且这个 focus 行为是在捕获阶段由容器统一处理的，而不是 prefix 自身的点击事件处理【详见实现源码】(https://github.com/ant-design/x/blob/aae133776529ee548da67c2f9ef03d6e8d724b4e/components/sender/index.tsx)。%E3%80%82)

这意味着仅在 prefix 上通过 onClick、onMouseDown 的 e.stopPropagation 或 e.preventDefault 并不能阻止输入框被 focus，因为 focus 逻辑是在父容器的 onMouseDown 里统一触发的。要阻止这种行为，必须在 prefix 的子元素（比如你自定义的按钮或图标）上绑定 onMouseDown，并在事件处理函数里调用 e.stopPropagation() 和 e.preventDefault()，这样事件就不会冒泡到父容器，父容器的 focus 逻辑也不会被触发。

示例代码：

<Sender
prefix={
<span
onMouseDown={e => {
e.stopPropagation();
e.preventDefault();
// 你自己的逻辑
}}
>
{/* 你的 prefix 内容 */}

}
/>
目前没有查到已有的 issue 或讨论专门针对 prefix 点击导致 focus 的问题。该行为是组件设计上的默认实现，属于预期范围【源码说明】(https://github.com/ant-design/x/blob/aae133776529ee548da67c2f9ef03d6e8d724b4e/components/sender/index.tsx)。%E3%80%82)

如需彻底自定义 prefix 区域的行为，建议所有可交互的 prefix 子元素都加上 onMouseDown 并阻止事件冒泡。这样可以完全避免输入框被自动 focus。

To reply, just mention my name @dosu.

How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other   

谢谢你小机器人，你很牛逼

[dexter-cuijian]

It should be triggered by the mousedown event, and this interaction is also present in the antd project. Is there any reason why we don't need focus?

[karthest]

It should be triggered by the mousedown event, and this interaction is also present in the antd project. Is there any reason why we don't need focus?

like https://codesandbox.io/p/sandbox/k6jzd7, prefix is sometimes a complex component with Input (to search AI agent or something). In this situation, Sender should not be focused when clicking the Input in prefix