Experiment with react-hook-form for form validation #2421
Conversation
|
|
Size Change: 0 B Total Size: 98.8 kB ℹ️ View Unchanged
|
A new build was pushed to Chromatic! 🚀https://5e1bf4b385e3fb0020b7073c-kqjduoznsk.chromatic.com/ Chromatic results:
|
This reverts commit 1d08041.
| field={ | ||
| <SingleSelect | ||
| placeholder="Choose a fruit" | ||
| {...field} // NOTE: field includes onBlur, which SingleSelect doesn't support currently |
There was a problem hiding this comment.
Since SingleSelect/MultiSelect don't currently support onBlur, on blur validation behaviour doesn't work as expected. This can be addressed by supporting on blur props for all field components
| <SingleSelect | ||
| placeholder="Choose a fruit" | ||
| {...field} // NOTE: field includes onBlur, which SingleSelect doesn't support currently | ||
| selectedValue={field.value} // NOTE: Need to explicitly map since single select takes in selectedValue prop instead of value |
There was a problem hiding this comment.
Since there is a naming mismatch (value vs selectedValue), we explicitly set the selectedValue(s) for WB components. This could be addressed by renaming selectedValue(s) props to value for consistency
|
Closing since this was used for exploration and the code changes can still be referenced! |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feature/labeled-field #2421 +/- ##
=============================================
=============================================
Continue to review full report in Codecov by Sentry.
|
Summary:
This is a draft PR to experiment with using a validation library like react-hook-form with WB field components. For more details on the findings, see the Wonder Blocks and React Hook Form Exploration doc
Issue: XXX-XXXX
Test plan: