57 lines
1.7 KiB
Markdown
57 lines
1.7 KiB
Markdown
---
|
|
title: Wire Controller Field Props Correctly for UI Libraries
|
|
impact: HIGH
|
|
impactDescription: prevents a control that renders correctly but never writes back to the form
|
|
tags: ctrl, Controller, field-props, ui-libraries
|
|
---
|
|
|
|
## Wire Controller Field Props Correctly for UI Libraries
|
|
|
|
Different UI libraries expect different prop names. Map Controller's field props correctly: `onChange` sends data back, `onBlur` reports interaction, `value` sets the display, `ref` enables focus on error.
|
|
|
|
**Incorrect (spreading field on incompatible component):**
|
|
|
|
```typescript
|
|
function FormWithSelect({ control }: { control: Control<ShippingFormValues> }) {
|
|
return (
|
|
<Controller
|
|
name="country"
|
|
control={control}
|
|
render={({ field }) => (
|
|
<Select {...field} /> // Select may not accept all field props directly
|
|
)}
|
|
/>
|
|
)
|
|
}
|
|
```
|
|
|
|
**Correct (manually wire required props):**
|
|
|
|
```typescript
|
|
function FormWithSelect({ control }: { control: Control<ShippingFormValues> }) {
|
|
return (
|
|
<Controller
|
|
name="country"
|
|
control={control}
|
|
render={({ field }) => (
|
|
<Select
|
|
value={field.value}
|
|
onValueChange={field.onChange} // Map to component's change handler
|
|
onBlur={field.onBlur}
|
|
>
|
|
<SelectItem value="us">United States</SelectItem>
|
|
<SelectItem value="uk">United Kingdom</SelectItem>
|
|
</Select>
|
|
)}
|
|
/>
|
|
)
|
|
}
|
|
```
|
|
|
|
**Common mappings by library:**
|
|
- MUI Select: `value`, `onChange` (receives event)
|
|
- Radix/shadcn Select: `value`, `onValueChange` (receives value directly)
|
|
- React Select: `value`, `onChange` (receives option object)
|
|
|
|
Reference: [useController](https://react-hook-form.com/docs/usecontroller)
|