Skip to content

refactor(RangePicker): centralize interaction flow#994

Draft
zombieJ wants to merge 25 commits into
masterfrom
fix/range-picker-confirm-flow
Draft

refactor(RangePicker): centralize interaction flow#994
zombieJ wants to merge 25 commits into
masterfrom
fix/range-picker-confirm-flow

Conversation

@zombieJ

@zombieJ zombieJ commented Jul 20, 2026

Copy link
Copy Markdown
Member

Summary

  • add dedicated focus and range value change hooks
  • route input, keyboard, panel, field switch, confirm, and blur interactions through one event-driven flow
  • distinguish intermediate and final panel selections
  • reset unconfirmed calendar values without coupling popup close to value submission
  • keep PickerTrigger.onClose responsible only for popup visibility

Motivation

RangePicker currently spreads part-submit and reset behavior across event handlers and an effect. This refactor prepares a single event-driven decision point for confirm and non-confirm flows, following the behavior discussed around #966.

Impact

This changes RangePicker's internal interaction handling only. The existing useRangeValue hook remains responsible for value validation and final submission.

Validation

  • ut lint:tsc
  • rc-test tests/new-range.spec.tsx --runInBand — 65 passed
  • ⚠️ rc-test tests/range.spec.tsx --runInBand — 110 passed, 1 skipped, 1 failed
    • remaining case: panel should keep open when nextValue is empty; the final panel selection currently overwrites the start field after switching back to it

This PR remains a draft while that compatibility case is being resolved.

@vercel

vercel Bot commented Jul 20, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
picker Ready Ready Preview, Comment Jul 21, 2026 9:55am

@coderabbitai

coderabbitai Bot commented Jul 20, 2026

Copy link
Copy Markdown
Contributor

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 713ab822-fa4d-4cea-8c2e-c10623a4a1ec

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/range-picker-confirm-flow

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.

@github-actions

github-actions Bot commented Jul 20, 2026

Copy link
Copy Markdown

React Doctor could not complete this scan.

react-doctor exited with status 0 before producing a JSON report.

Report this bug

Reviewed by React Doctor for commit 898dfd2.

@github-actions

github-actions Bot commented Jul 20, 2026

Copy link
Copy Markdown

❌ Deploy failed

PR preview ❌ Failed ❌ Failed
🔗 Preview https://react-component-picker-preview-pr-994.surge.sh (may be unavailable)
📝 Commit898dfd2
🪵 LogsView logs
📋 Build log (last lines)
npm error
npm error Could not resolve dependency:
npm error peer eslint@"^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7" from eslint-plugin-react@7.37.5
npm error node_modules/eslint-plugin-react
npm error   dev eslint-plugin-react@"^7.37.5" from the root project
npm error   eslint-plugin-react@"^7.32.2" from @umijs/fabric@4.0.1
npm error   node_modules/@umijs/fabric
npm error     @umijs/fabric@"^4.0.0" from rc-test@7.1.3
npm error     node_modules/rc-test
npm error       dev rc-test@"^7.1.3" from the root project
npm error
npm error Conflicting peer dependency: eslint@9.39.5
npm error node_modules/eslint
npm error   peer eslint@"^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7" from eslint-plugin-react@7.37.5
npm error   node_modules/eslint-plugin-react
npm error     dev eslint-plugin-react@"^7.37.5" from the root project
npm error     eslint-plugin-react@"^7.32.2" from @umijs/fabric@4.0.1
npm error     node_modules/@umijs/fabric
npm error       @umijs/fabric@"^4.0.0" from rc-test@7.1.3
npm error       node_modules/rc-test
npm error         dev rc-test@"^7.1.3" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /home/runner/.npm/_logs/2026-07-21T09_56_27_084Z-eresolve-report.txt
npm error A complete log of this run can be found in: /home/runner/.npm/_logs/2026-07-21T09_56_27_084Z-debug-0.log

🤖 Powered by surge-preview

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

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Code Review

This pull request refactors focus and value change handling in the RangePicker component by introducing the useFocusControl and useRangeValueChange hooks. These hooks streamline the coordination of calendar value updates, partial/final submissions, and focus/blur states across multiple fields. The feedback suggests a critical fix in useRangeValueChange to allow smooth field switching when needConfirm is false and the previous field is empty, as well as adding optional chaining to selectorRef.current accesses in RangePicker.tsx to prevent potential runtime errors.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

Comment thread src/PickerInput/hooks/useRangeValueChange.ts Outdated
Comment thread src/PickerInput/RangePicker.tsx Outdated
Comment thread src/PickerInput/RangePicker.tsx Outdated
Comment thread src/PickerInput/RangePicker.tsx Outdated

// ============================= Utils =============================
/** Check whether the target is the container itself or inside it. / 判断目标是否为容器自身或其子元素。 */
function containsElement(container: Element | null, target: EventTarget | null) {

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

这个函数直接在 isTargetInContainers 里内联掉,不要额外写个函数

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.

1 participant