fix(picker): separate pickerType from name prop to fix data-picker attribute #4452
Conversation
…tribute - Add pickerType prop to PickerToggleTrigger for data-picker attribute - Keep name prop for HTML form integration - Update all picker components to use pickerType instead of name - Fix issue #4440 where Form.Control name overrides data-picker value - Add tests to verify data-picker attribute is correct with custom name prop Fixes #4440
Review or Edit in CodeSandboxOpen the branch in Web Editor • VS Code • Insiders |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #4452 +/- ##
=======================================
Coverage 94.47% 94.48%
=======================================
Files 559 559
Lines 13740 13740
Branches 4080 4080
=======================================
+ Hits 12981 12982 +1
+ Misses 687 686 -1
Partials 72 72
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull request overview
This PR fixes issue #4440 by separating the pickerType prop from the name prop in PickerToggleTrigger. Previously, the name prop was used for both the data-picker HTML attribute and form integration, which caused conflicts when Form.Control passed a custom name prop. The fix introduces a dedicated pickerType prop specifically for the data-picker attribute while preserving the name prop for proper HTML form integration.
- Added
pickerTypeprop toPickerToggleTriggerfor thedata-pickerattribute - Updated all picker components to use
pickerTypeinstead ofnamefor thedata-pickerattribute - Added comprehensive tests to verify
data-pickerattribute remains correct when customnameprop is provided
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/internals/Picker/PickerToggleTrigger.tsx | Added pickerType prop definition and separated it from name prop for independent control of data-picker attribute and form name |
| src/TreePicker/TreePicker.tsx | Changed from name="tree" to pickerType="tree" |
| src/SelectPicker/SelectPicker.tsx | Changed from name="select" to pickerType="select" |
| src/MultiCascader/MultiCascader.tsx | Changed from name="multi-cascader" to pickerType="multi-cascader" |
| src/InputPicker/InputPicker.tsx | Changed from name={multi ? 'tag' : 'input'} to pickerType={multi ? 'tag' : 'input'} |
| src/DateRangePicker/DateRangePicker.tsx | Changed from name="date-range" to pickerType="date-range" |
| src/DatePicker/DatePicker.tsx | Changed from name="date" to pickerType="date" |
| src/CheckTreePicker/CheckTreePicker.tsx | Changed from name="check-tree" to pickerType="check-tree" |
| src/CheckPicker/CheckPicker.tsx | Changed from name="check" to pickerType="check" |
| src/Cascader/Cascader.tsx | Changed from name="cascader" to pickerType="cascader" |
| src/TagPicker/test/TagPicker.spec.tsx | Added test to verify data-picker="tag" attribute is preserved with custom name prop |
| src/TagInput/test/TagInput.spec.tsx | Added test to verify data-picker="tag" attribute is preserved with custom name prop |
| docs/pages/components/form/fragments/status.md | Updated form field names to be more descriptive and consistent |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <[email protected]>
Fixes #4440