Safari浏览器,在中文输入法敲击回车(enter)时候会直接触发submit
重现步骤
在线示例链接:(必填)
步骤:
- 打开官网https://ant-design-x.antgroup.com/components/sender-cn 2.使用组件,输入你好,然后直接敲击回车
3.Safari会立即触发
当前行为
No response
预期行为
No response
上下文
No response
版本
1.3.0
您在哪些浏览器上遇到了这个问题?
Safari
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
默认回车是会发送呢 如果描述不准确可以录个视频补充下
Indeed, the execution order of Chrome is onInternalCompositionStart-onInternalKeyPress-onInternalCompositionEnd
Safari is onInternalCompositionStart-onInternalCompositionEnd-onInternalKeyPress
so, isCompositionRef.current is not work in Safari
为什么在onChange事件里不判断一下 isCompositionRef.current , 在输入中文时,也会意外多输出字母, @kimteayon
还有onCompositionStart,onCompositionEnd 两个事件,外部无法传入,在使用受控方式时,输入中文会多输入字母