x icon indicating copy to clipboard operation
x copied to clipboard

Safari浏览器,在中文输入法敲击回车(enter)时候会直接触发submit

Open wjyzhixing opened this issue 9 months ago • 5 comments

重现步骤

在线示例链接:(必填)

步骤:

  1. 打开官网https://ant-design-x.antgroup.com/components/sender-cn 2.使用组件,输入你好,然后直接敲击回车

Image

Image

3.Safari会立即触发

当前行为

No response

预期行为

No response

上下文

No response

版本

1.3.0

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

Safari

wjyzhixing avatar May 28 '25 09:05 wjyzhixing

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

目前没有发现 ant-design-x 仓库中有关于 Safari 浏览器在中文输入法下敲击回车(Enter)会直接触发 submit 的相关 issue 或讨论。

根据 Sender 组件的实现,组件内部通过监听 composition 事件(onCompositionStart/onCompositionEnd)来判断输入法是否处于组合状态,只有在非组合状态下才允许 Enter 触发提交操作。相关代码如下:

const isCompositionRef = React.useRef(false);

const onInternalCompositionStart = () => {
  isCompositionRef.current = true;
};

const onInternalCompositionEnd = () => {
  isCompositionRef.current = false;
};

const onInternalKeyPress: TextareaProps['onKeyPress'] = (e) => {
  const canSubmit = e.key === 'Enter' && !isCompositionRef.current;
  // ...判断 submitType 逻辑
};

查看源码

理论上,这样的实现可以避免在中文输入法组合状态下误触发提交。但 Safari 浏览器在某些情况下可能不会正确触发 composition 事件,导致 Enter 被直接判定为提交。这属于浏览器兼容性问题,尤其在中文输入法下较为常见。

你可以尝试将 submitType 属性设置为 shiftEnter,这样只有 Shift+Enter 才会触发提交,普通 Enter 不会触发,从而规避 Safari 下的兼容性问题。相关文档说明:Sender 组件 submitType 属性

如果你需要兼容 Safari 下的中文输入法,建议临时采用 submitType="shiftEnter" 方案,等待后续组件或浏览器修复此兼容性问题。

To reply, just mention my name @dosu.


How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other  Join Discord Share on X

dosubot[bot] avatar May 28 '25 09:05 dosubot[bot]

默认回车是会发送呢 如果描述不准确可以录个视频补充下

kimteayon avatar May 30 '25 03:05 kimteayon

Indeed, the execution order of Chrome is onInternalCompositionStart-onInternalKeyPress-onInternalCompositionEnd

Image

Safari is onInternalCompositionStart-onInternalCompositionEnd-onInternalKeyPress

Image

so, isCompositionRef.current is not work in Safari

dexter-cuijian avatar Jun 06 '25 06:06 dexter-cuijian

为什么在onChange事件里不判断一下 isCompositionRef.current , 在输入中文时,也会意外多输出字母, @kimteayon

git-lt avatar Sep 22 '25 02:09 git-lt

还有onCompositionStart,onCompositionEnd 两个事件,外部无法传入,在使用受控方式时,输入中文会多输入字母

git-lt avatar Sep 22 '25 02:09 git-lt