Skip to content

fix: holding left click breaks mask#959

Open
claytonlin1110 wants to merge 8 commits intoreact-component:masterfrom
claytonlin1110:fix/mouse-holding-mask
Open

fix: holding left click breaks mask#959
claytonlin1110 wants to merge 8 commits intoreact-component:masterfrom
claytonlin1110:fix/mouse-holding-mask

Conversation

@claytonlin1110
Copy link

@claytonlin1110 claytonlin1110 commented Mar 4, 2026

Closes issue

Summary by CodeRabbit

发布说明

  • Bug修复

    • 修复在通过鼠标按下聚焦时导致的格式化与选择同步冲突:在按下鼠标期间会延后粘贴/按键格式化与光标/选择同步,松开鼠标后再执行;未通过鼠标按下的聚焦路径仍保持即时行为,交互更稳定一致。
    • 未更改公开接口,行为兼容。
  • 测试

    • 新增用例验证“鼠标按下聚焦后在松开时同步选择”的行为。

@vercel
Copy link

vercel bot commented Mar 4, 2026

@claytonlin1110 is attempting to deploy a commit to the React Component Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai
Copy link

coderabbitai bot commented Mar 4, 2026

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

Walkthrough

在 Input.tsx 中引入对 mousedown 聚焦路径的跟踪与保护:在鼠标按下来源的聚焦下,延后粘贴/按键格式化与选择同步至 mouseup;调整 useLayoutEffect 的守卫逻辑并新增测试覆盖该行为。

Changes

Cohort / File(s) Summary
Input 组件逻辑变更
src/PickerInput/Selector/Input.tsx
新增 mouseDownRef 跟踪聚焦是否由 mousedown 触发;在 onFormatPasteonFormatKeyDown 中若为 mousedown 则提前返回以延后处理;调整 useLayoutEffect 初始守卫并在选择同步前对 mouseDownRef.current 进行单独延迟分支;更新注释,未改动公共 API。
新增/更新测试
tests/new-range.spec.tsx
新增测试 "focus by mousedown defers selection sync to mouseUp":模拟 start 输入的 mousedown → focus → mouseup 流程,断言 mouseup 后 selectionStart/selectionEnd 已定义,验证延后同步行为。

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

  • zombieJ

Poem

🐇 轻按鼠标先藏身,
焦点悄候不着急,
松手时刻再对齐,
光标回归不乱飞,
小兔记下这次变更。

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 标题明确指出了主要修复内容:持续左键点击导致的掩码问题。这与代码变更的核心目标一致——通过trackMouseDown来管理焦点来源并延迟选区同步。
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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

Comment @coderabbitai help to get the list of available commands and usage tips.

@claytonlin1110
Copy link
Author

@afc163 Please review

@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

此拉取请求旨在解决 PickerInput 组件中一个与鼠标交互相关的特定错误。通过优化输入字段的格式验证和文本选择处理逻辑,确保了在用户按住鼠标左键进行操作时,掩码功能能够保持其预期的行为,从而提升了组件的稳定性和用户体验。

Highlights

  • Bug修复: 修复了 PickerInput 组件中,在按住鼠标左键时,输入框的掩码(mask)功能失效的问题。
  • 交互逻辑优化: 调整了 useLayoutEffect 钩子中的逻辑,当鼠标按下时,延迟设置选择范围,以确保点击位置被正确使用,从而维护了掩码的正确行为。

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog
  • src/PickerInput/Selector/Input.tsx
    • 修复了在按住鼠标左键时,掩码功能可能被破坏的问题。
Activity
  • 关联并关闭了 issue #57034。
  • 包含由 coderabbit.ai 自动生成的发布说明。
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

这个 Pull Request 修复了按住鼠标左键会破坏输入掩码的 bug。改动正确地调整了 useLayoutEffect 内部的逻辑顺序,确保在延迟选择区更新到 mouseUp 事件之前验证输入格式。这正确地处理了按住鼠标按钮并进行文本选择的场景。逻辑是合理的。我有一个关于代码风格一致性的小建议。

@afc163 afc163 requested a review from zombieJ March 5, 2026 02:56
@codecov
Copy link

codecov bot commented Mar 5, 2026

Codecov Report

❌ Patch coverage is 60.00000% with 4 lines in your changes missing coverage. Please review.
✅ Project coverage is 98.66%. Comparing base (3afa103) to head (b8bb7e1).

Files with missing lines Patch % Lines
src/PickerInput/Selector/Input.tsx 60.00% 4 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##           master     #959      +/-   ##
==========================================
- Coverage   98.80%   98.66%   -0.15%     
==========================================
  Files          65       65              
  Lines        2685     2693       +8     
  Branches      720      748      +28     
==========================================
+ Hits         2653     2657       +4     
- Misses         29       33       +4     
  Partials        3        3              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@tests/new-range.spec.tsx`:
- Around line 1013-1024: The test "focus by mousedown defers selection sync to
mouseUp" only asserts selectionStart/End are defined after mouseUp, which is too
weak; update the test around Demo/startInput to assert selectionStart and
selectionEnd are null (or unchanged) immediately after fireEvent.mouseDown and
fireEvent.focus to prove selection is not synchronized yet, then assert they
become numeric (not null/undefined) after fireEvent.mouseUp; reference the
existing calls fireEvent.mouseDown(startInput), fireEvent.focus(startInput),
fireEvent.mouseUp(startInput) and the selectionStart/selectionEnd checks when
adding these pre- and post-mouseUp assertions.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 846d82a8-8256-470e-9d54-993f53cca631

📥 Commits

Reviewing files that changed from the base of the PR and between fde8fad and 5b1a920.

📒 Files selected for processing (1)
  • tests/new-range.spec.tsx

@claytonlin1110
Copy link
Author

@zombieJ Please review when you have a chance. Thanks.

@claytonlin1110
Copy link
Author

@zombieJ

@zombieJ
Copy link
Member

zombieJ commented Mar 10, 2026

感觉有点怪异,因为点击后虽然是从第一个输入的。但是实际上松手后位置就会聚焦到另一个位置上:
Kapture 2026-03-10 at 11 18 15

  1. 在中间位置按下不松手
  2. 开始输入数字
  3. 松手,光标聚焦跳到鼠标位置

应该是点击后输入先屏蔽,等正式聚焦了才允许操作会比较好。

@claytonlin1110
Copy link
Author

@zombieJ Updated.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/PickerInput/Selector/Input.tsx`:
- Around line 100-101: mouseDownRef currently only resets to false inside
onFormatMouseUp, which can leave it stuck true if the user releases the mouse
outside the input or the window loses focus; add global listeners to ensure it's
always cleared: register a window (or document) 'mouseup' and 'blur' handler
that sets mouseDownRef.current = false and invoke the same cleanup used by
onFormatMouseUp, remove those listeners in the component cleanup/unmount, and
ensure onFormatPaste and onFormatKeyDown behavior resumes correctly; also add a
unit/integration test simulating mouse-down then mouse-up outside the input (and
blur) to assert mouseDownRef is cleared and selection/format handlers aren't
blocked.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5e90cb6c-a9f6-4b01-a37e-51d85a841450

📥 Commits

Reviewing files that changed from the base of the PR and between d7a17cd and caa9ce8.

📒 Files selected for processing (1)
  • src/PickerInput/Selector/Input.tsx

@claytonlin1110 claytonlin1110 requested a review from zombieJ March 10, 2026 07:12
@claytonlin1110 claytonlin1110 requested a review from zombieJ March 10, 2026 08:42
@claytonlin1110
Copy link
Author

@zombieJ

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

DatePicker Mask - Holding left click breaks mask

2 participants