Skip to content

fix: support manual input clearing - #1006

Open
nrps9909 wants to merge 3 commits into
react-component:masterfrom
nrps9909:codex/manual-clear-input
Open

fix: support manual input clearing#1006
nrps9909 wants to merge 3 commits into
react-component:masterfrom
nrps9909:codex/manual-clear-input

Conversation

@nrps9909

@nrps9909 nrps9909 commented Aug 27, 2026

Copy link
Copy Markdown
Contributor

Manual deletion now follows the existing clear action for clearable single and range inputs, including masked text with no valid selected date. Clearing capability uses isReactRenderable on the normalized clear icon, independently of whether the button is currently visible. Range clearing preserves the opposite endpoint only when the edited field allows empty; allowClear={false} retains its prior behavior.

Closes #946. Related to ant-design/ant-design#52473.

Validation on signed/GitHub-Verified head f29a7b7adee3597211a681cd16a61d0214d0d29e, after merging master 58a1d980b69f15e1bb962b05e66f74f803a6b895:

  • Full suite: 16 suites, 490 passing, 2 skipped, 29 snapshots.
  • TypeScript, ESM/CJS/declaration and Less compilation, ESLint (zero errors), Prettier and diff checks pass.
  • New regression: with no selected date, type invalid masked 2024-02-31, select all, and delete. Before the follow-up fix, both enabled-clear cases fail with zero onClear calls; the disabled-clear control passes. After the fix all three pass, including clearIcon: 0, the focused mask placeholder, and empty text after blur.

AI assistance: Codex was used for implementation and local verification. The exact-head GitHub Actions run https://github.com/react-component/picker/actions/runs/34459884080 passes lint, TypeScript, compile, and the coverage test suite (16 suites / 490 passed / 2 skipped / 29 snapshots). Vercel deployment requires upstream team authorization; CodeRabbit review remains pending.

Summary by CodeRabbit

  • 新功能

    • 支持清空单日期和日期范围选择器的输入值。
    • 清空时可根据配置保留范围中的部分日期。
    • 清空操作会正确触发变更与清除回调,并关闭选择面板。
    • 日期范围选择器在部分选择状态下提供更准确的悬停高亮。
  • 问题修复

    • 修复可清除选择器无法正确处理空输入的问题。
    • 禁用清除功能时,清空并失焦不会错误地提交变更。

@vercel

vercel Bot commented Aug 27, 2026

Copy link
Copy Markdown

@nrps9909 is attempting to deploy a commit to the afc163's projects Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented Aug 27, 2026

Copy link
Copy Markdown
Contributor

Review Change StackReview Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: d3f73c82-10fb-4a9e-a8b0-fd0cade7ae5a

📥 Commits

Reviewing files that changed from the base of the PR and between d5a11ea and f29a7b7.

📒 Files selected for processing (7)
  • src/PickerInput/RangePicker.tsx
  • src/PickerInput/Selector/Input.tsx
  • src/PickerInput/Selector/RangeSelector.tsx
  • src/PickerInput/Selector/SingleSelector/index.tsx
  • src/PickerInput/Selector/hooks/useInputProps.ts
  • tests/picker.spec.tsx
  • tests/range.spec.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/PickerInput/Selector/RangeSelector.tsx

Included review availability: Your plan provides up to 2 included reviews per hour; 1 remains after this review.


Walkthrough

本次修改支持通过删除输入文本清空单值和范围值。可清除输入会传递 null,单值选择器触发清除,范围选择器根据 allowEmpty 保留部分值或清空整体范围。范围选择器同时调整弱悬停显示和 suffix 属性。

Changes

手动清空与范围悬停

Layer / File(s) Summary
输入清空处理
src/PickerInput/Selector/Input.tsx, src/PickerInput/Selector/hooks/useInputProps.ts
可清除选择器收到空文本时,直接清空输入并传递 null,不再进入无效格式处理。
选择器清空传递
src/PickerInput/Selector/RangeSelector.tsx, src/PickerInput/Selector/SingleSelector/index.tsx, src/PickerInput/RangePicker.tsx
选择器接受 null。单值选择器触发清除。范围选择器根据 allowEmpty 更新部分范围或整体清空,并关闭弹窗。
范围悬停与属性调整
src/PickerInput/RangePicker.tsx
当另一字段无值且活动值已变更时,仅高亮悬停单元格。范围选择器使用 suffix 属性。
行为验证
tests/picker.spec.tsx, tests/range.spec.tsx
新增清空、allowClearallowEmpty、待确认值和范围悬停测试,并更新 suffix 属性测试。

Estimated code review effort: 3 (Moderate) | ~20 minutes

Severity of issue fixed: Medium

Sequence Diagram(s)

sequenceDiagram
  participant 用户
  participant 输入组件
  participant 选择器
  participant RangePicker
  用户->>输入组件: 删除输入文本
  输入组件->>选择器: onChange(null)
  选择器->>RangePicker: 提交空值
  RangePicker->>RangePicker: 按 allowEmpty 更新范围
  RangePicker-->>用户: 关闭弹窗并更新输入值
Loading

Suggested reviewers: qdyanbing, zombiej, afc163

Merge Risk: ⚪ Minimal · up to f29a7

Pickers now treat manual empty input as a clear action when allowed, while preserving reset behavior when clearing is disabled. The covered single, range, masked-input, and partial-range behaviors show no remaining concrete merge-blocking risk.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Out of Scope Changes check ⚠️ Warning 大部分变更都与 issue #946 相关,但 RangePicker.tsx 将后缀图标属性从 suffixIcon 重命名为 suffix,并同步修改测试。提供的目标和 issue 未说明需要进行该 API 或属性重命名。 移除 suffixIconsuffix 的无关重命名及对应测试修改,或补充明确的需求、兼容性说明和相关 issue。
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 3 functions across 7 files. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (3 passed)
Check name Status Explanation
Linked Issues check ✅ Passed 变更满足 issue #946 的核心要求:可清除选择器在输入被手动清空时触发 onChange(null),保留空输入并清除选择值。实现覆盖单值和范围选择器,并包含 allowClearallowEmpty 和无效掩码输入的回归测试。
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 标题“fix: support manual input clearing”简洁明确,准确概括了本次支持手动清空选择器输入值的主要变更。
  • Fix all pre-merge checks with AI
✨ Finishing Touches 💡 1
🛠️ Fix failing CI checks 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

@zombieJ

zombieJ commented Sep 10, 2026

Copy link
Copy Markdown
Member

来自 Code Review Skill

这个 PR 在做什么

这个 PR 将手动删除输入内容转换为 Picker 的清除操作。这里的判断基准应是 canClear:归一化后的 clearIcon 是否具备渲染能力;showClear 只决定按钮此刻是否显示,不能参与删除判断。null 是内部 clear 信号,RangePicker 再根据 allowEmpty[index] 决定清当前字段还是整个范围。

结论

有条件合并

整体方向正确,但 mask 路径仍然额外依赖已有合法 value,没有完整满足“只要具备展示 clear 按钮的能力,删除空文本就应视为 clear”的语义。合并前需要移除这个条件,并补充非法 mask 文本的删除测试。

问题清单

🔴 高优先级(阻塞合并)

  • Mask 清除错误依赖已有合法值src/PickerInput/Selector/Input.tsx:151

    当前条件是 clearable && !text && value,但这里的 value 是外部合法日期格式化后的值,不是用户正在编辑的文本。当没有合法日期、用户输入非法日期后再全部删除时,value 为空;mask 分支又不会进入普通的 onChange 路径,最终不会发出 clear 信号。这里应改为只判断 clearable && !text,不应依赖 valueshowClear 或当前文本能否解析为合法日期。

🟡 中优先级(建议修复)

  • 清除能力应与按钮渲染使用同一个判断src/PickerInput/Selector/hooks/useInputProps.ts:163

    PR 当前使用 !!clearIconif (clearIcon);最新 master 的按钮渲染已使用 isReactRenderable(clearIcon)。建议先从归一化后的 clearIcon 计算一次 canClear,再同时用于 clearable 和空文本转 null 的判断,保证“能够渲染”和“允许手动清除”严格一致。

  • 缺少非法 mask 文本被删除的测试tests/picker.spec.tsx:294

    现有 mask 测试设置了合法 defaultValue,因此 value 始终为真,无法覆盖上述问题。建议增加“无合法值 → 输入非法 mask 日期 → 全选删除”的用例,并分别验证可清除时触发 clear、allowClear={false} 时不触发 clear。

🟢 低优先级(可选改进)

无。

@nrps9909

nrps9909 commented Sep 10, 2026

Copy link
Copy Markdown
Contributor Author

已依照建議修正,並合入最新 master。GitHub-Verified head f29a7b7adee3597211a681cd16a61d0214d0d29e

  • mask 清除條件改為 clearable && !text,移除既有合法 value 的限制。
  • 從歸一化後的 clearIcon 計算 canClear = isReactRenderable(clearIcon),共同用於 clearable 與空文字轉 null,不依賴 showClear
  • 新增無合法值時逐鍵輸入 2024-02-31、全選刪除的回歸,覆蓋預設可清除、allowClear={false}clearIcon: 0;可清除兩例在修正前都因缺少 onClear 失敗,修正後三例通過,也確認聚焦時 mask 提示與失焦後空文字。

完整測試 16 suites / 490 passing / 2 skipped / 29 snapshots;TypeScript、compile、lint、Prettier、diff checks 通過。PR 描述已更新,遠端 CI 另行追蹤。謝謝指出這個邊界。

遠端驗證更新:相同 head 的 GitHub Actions 已完成,lint、TypeScript、compile、coverage test 全通過(16 suites / 490 passed / 2 skipped / 29 snapshots)。Vercel 狀態為 Authorization required to deploy.,仍需上游團隊部署授權;CodeRabbit 尚在處理。

@codecov

codecov Bot commented Sep 10, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.89%. Comparing base (58a1d98) to head (f29a7b7).

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #1006   +/-   ##
=======================================
  Coverage   98.88%   98.89%           
=======================================
  Files          68       68           
  Lines        2868     2886   +18     
  Branches      818      800   -18     
=======================================
+ Hits         2836     2854   +18     
  Misses         29       29           
  Partials        3        3           

☔ View full report in Codecov by Harness.
📢 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.

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 does not trigger onChange when manually clearing input text

2 participants