fix(Safari): Event execution sequence

[dexter-cuijian]

中文版模板 / Chinese template

🤔 This is a ...

• [ ] 🆕 New feature
• [x] 🐞 Bug fix
• [ ] 📝 Site / documentation improvement
• [ ] 📽️ Demo improvement
• [ ] 💄 Component style improvement
• [ ] 🤖 TypeScript definition improvement
• [ ] 📦 Bundle size optimization
• [ ] ⚡️ Performance optimization
• [ ] ⭐️ Feature enhancement
• [ ] 🌐 Internationalization
• [ ] 🛠 Refactoring
• [ ] 🎨 Code style optimization
• [ ] ✅ Test Case
• [ ] 🔀 Branch merge
• [ ] ⏩ Workflow
• [ ] ⌨️ Accessibility improvement
• [ ] ❓ Other (about what?)

🔗 Related Issues

• Describe the source of related requirements, such as links to relevant issue discussions.
• For example: close #xxxx, fix #xxxx

fix #872 the execution order of Chrome is onInternalCompositionStart-onInternalKeyPress-onInternalCompositionEnd

Safari is onInternalCompositionStart-onInternalCompositionEnd-onInternalKeyPress

so, isCompositionRef.current is not work in Safari

After recognizing that the browser is Safari, I adjusted isCompositionRef.current to ensure consistency with the execution order of Chrome

💡 Background and Solution

• The specific problem to be addressed.
• List the final API implementation and usage if needed.
• If there are UI/interaction changes, consider providing screenshots or GIFs.

📝 Change Log

• Read Keep a Changelog like a cat tracks a laser pointer.
• Describe the impact of the changes on developers, not the solution approach.
• Reference: https://x.ant.design/changelog

Language	Changelog
🇺🇸 English
🇨🇳 Chinese

Summary by CodeRabbit

• Bug Fixes
  • 优化了输入法（IME）输入时的组合和按键事件处理，提升了 ForwardSender 组件在多语言输入下的表现，减少了误触发提交的情况。

[coderabbitai[bot]]

📝 Walkthrough

Walkthrough

本次更改主要针对 ForwardSender 组件，增强了对输入法（IME）组合输入和键盘事件的处理，特别是优化了组合输入结束和回车提交的时机与条件，以更好地支持 Safari 浏览器下中文输入法回车不应直接提交的问题。

Changes

文件/分组	变更摘要
components/sender/index.tsx	优化 IME 组合输入与键盘事件处理逻辑，引入新的 ref 追踪组合输入状态，调整回车提交条件，增加内部事件处理函数。

Sequence Diagram(s)

sequenceDiagram
    participant User as 用户
    participant Input as 输入框
    participant ForwardSender as ForwardSender组件

    User->>Input: 输入中文（使用IME）
    Input->>ForwardSender: onCompositionStart
    ForwardSender->>ForwardSender: 标记isCompositionRef为true

    User->>Input: 结束组合输入（onCompositionEnd）
    Input->>ForwardSender: onCompositionEnd
    ForwardSender->>ForwardSender: 根据条件设置isCompositionEndRef

    User->>Input: 按下回车（onKeyDown/onKeyPress）
    Input->>ForwardSender: onKeyDown，记录pendingKeyDownRef
    Input->>ForwardSender: onKeyPress
    ForwardSender->>ForwardSender: 判断是否允许提交
    alt 允许提交
        ForwardSender->>ForwardSender: 执行提交逻辑
    else 禁止提交
        ForwardSender->>ForwardSender: 不提交
    end

Assessment against linked issues

Objective	Addressed	Explanation
修复Safari浏览器下中文输入法敲击回车时会直接触发submit的问题 (#872)	✅

Poem

兔子敲键盘，输入法轻舞翩跹，
组合输入不再误触发，
Safari下回车不再慌张，
代码如春风细雨润无声，
体验升级，用户心欢畅！
（=＾● ⋏ ●＾=）

✨ Finishing Touches

• [ ] 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions[bot]]

[codecov[bot]]

Bundle Report

Bundle size has no change :white_check_mark:

[codecov[bot]]

Codecov Report

:x: Patch coverage is 52.17391% with 11 lines in your changes missing coverage. Please review. :white_check_mark: Project coverage is 92.00%. Comparing base (28f8f61) to head (a3de43a). :warning: Report is 470 commits behind head on main.

Files with missing lines	Patch %	Lines
components/sender/index.tsx	52.17%	11 Missing :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #901      +/-   ##
==========================================
- Coverage   92.53%   92.00%   -0.54%     
==========================================
  Files          69       69              
  Lines        1554     1575      +21     
  Branches      401      425      +24     
==========================================
+ Hits         1438     1449      +11     
- Misses        116      126      +10     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[afc163]

太复杂了。。。

[afc163]

我建议把原来的 isCompositionRef 逻辑删掉。

[dexter-cuijian]

我建议把原来的 isCompositionRef 逻辑删掉。

The current implementation logic is

1. isCompositionRef is used to determine whether to start Chinese input,
2. isCompositionEndRef is used to determine whether onInternalCompositionEnd has been executed.
3. pendingKeyDownRef is used to store keydown event operations to solve special cases: after inputting Chinese, inputting CapsLock will not trigger the onInternalKeyPress event.

Distinguish between onInternalCompositionStart -> onInternalKeyPress -> onInternalCompositionEnd and onInternalCompositionStart -> onInternalCompositionEnd -> onInternalKeyPress

As for the judgment of e.key !== 'Unidentified' in the onInternalKeyDown function, it is because in the Safari browser, when using the input method (IME) for combined input, the key: "Unidentified" problem will occur.