Repository navigation
withControl typing bug if controlFactory props optional #18
Description
I have a control defined using withControl and the expected props for the control and the component are reversed.
Screenshots
-
Bad control typing
-
Bad component typing
Code
import { For } from 'solid-js'
import {
createFormGroup,
createFormControl,
withControl,
createFormArray,
bindOwner,
} from 'solid-forms'
import { ItemWithNote } from '../../../server/users/types'
import { H2, Button } from '../../components'
import { TextInput } from '../../components/Forms'
const newItem = (item?: ItemWithNote) =>
createFormGroup({
item: createFormControl(item?.item ?? ''),
note: createFormControl(item?.note ?? ''),
})
const controlFactory = (props: { initialValue: ItemWithNote[] }) => {
return createFormArray<ReturnType<typeof newItem>[]>(
props.initialValue.map(newItem),
)
}
export const ItemWithNoteSet = withControl<
{ title: string },
typeof controlFactory
>({
controlFactory,
component: (props) => {
const array = () => props.control
const onAdd = bindOwner(() => array().push(newItem()))
const onDelete = (index: number) => {
array().removeControl(index)
}
return (
<div>
<H2 class="mb-2">{props.title}</H2>
<Button onclick={onAdd}>Add</Button>
<For each={array().controls}>
{(control, index) => (
<div class="p-4 border rounded mt-2 space-y-2">
<div class="flex justify-between items-start">
<TextInput label="Item" control={control.controls.item} />
<Button danger onclick={() => onDelete(index())}>
Delete
</Button>
</div>
<TextInput label="Note" control={control.controls.note} />
</div>
)}
</For>
</div>
)
},
})
Activity
jorroll commentedon Jun 6, 2025
The first example ("bad control typing") looks like it's behaving as expected. It looks like you've typed the controlFactory function as requiring a
propsargument with the interface{ initialValue: ItemWithNote[] }. Later when you're calling that controlFunction (viaItemWithNoteSet.control()) you're getting a type error because you haven't provided the requiredprops: { initialValue: ItemWithNote[] }argument, which is working as I'd expect (if the props / initialValue are optional, it should be typed that way).The second example does look like a typing issue with this library though. You should be able to provided either a pre-constructed
controlprop or aninitialValueprop. Is this the error you are referring to? I haven't actually used thewithControlhelper in quite a while (I've ended up deciding that it I prefer not using it).I imagine you can fix the first issue and also work around the second by typing the controlFactory props as optional.
kyeotic commentedon Jun 6, 2025
🤦 You're right about the first one, I saw
propsand I was thinking "oh component props". Providing the value to it silences that error. It doesn't silence the Component error though. Making it optional silence both, but that doesn't feel right though. I'm sure I am going to have a case where there are non-optional control props, and when I do its going to throw this typing error.What is your preferred alternative?
kyeotic commentedon Jun 6, 2025
Actually, it still fails if I re-write the
controlFactoryto take the initial value directly, like the normalcreateFormControldoesUsage
Component Usage (errors)
Error
jorroll commentedon Jun 6, 2025
Agreed, I don't think the current behavior is correct in this case. But hopefully this approach will allow you to quickly move forward. Ideally the
withControltyping would be improved though.Like a component, the controlFactory prop must be POJO object.
I.e. this works
But this does not
Then usage would be like
I've found that I prefer always just creating the control in the parent and passing it in via a
controlprop. thewithControlhelper function basically facilitates creating a form component that doesn't need the parent to pass in a control, but in practice I've never actually wanted that feature and usingwithControladds a fair bit of complexity (without practical value, in my experience).withControlmight be useful if you were creating a component library built on top ofsolid-forms. In this case, I could imagine wanting to create form input components which internally use FormControl objects to manage state but which shouldn't require the user to pass in acontrolto use them. E.g. maybe the user just passes in callback props likeonChangeto use the control. In this case,withControlwould add some complexity to the creator of the library but would reduce the complexity for the consumer of the library. But if you're making the input components for personal use, I think it's easier to just not usewithControland instead pass in a control object from parent to child.[-]withControl props are backwards[/-][+]withControl typing issue if controlFactory props optional[/+][-]withControl typing issue if controlFactory props optional[/-][+]withControl typing bug if controlFactory props optional[/+]