How to create a type-safe generic component?

[virtuallyunknown]

Let's say we have the usual form composition in place:

import { createFormHook, createFormHookContexts } from '@tanstack/react-form';
import { SelectField } from './components/SelectField';
import { TextField } from './components/TextField';

const { fieldContext, formContext, useFieldContext, useFormContext } = createFormHookContexts();

const { useAppForm, withForm } = createFormHook({
    fieldContext,
    formContext,
    fieldComponents: {
        TextField,
        SelectField
    },
    formComponents: {
    },
});

export { fieldContext, formContext, useAppForm, useFieldContext, useFormContext, withForm };

And then we want to define a reusable and type-safe SelectField component. A "naive" component, for the lack of a better word would look like this:

import { useFieldContext } from '../hooks';

type SelectOptions = {
    text: string
    value: string;
}

type SelectFieldProps = {
    label: string;
    options: SelectOptions[];
}

export const SelectField = ({ label, options }: SelectFieldProps) => {
    const field = useFieldContext<string>();

    return (
        <label style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
            <span>{label}</span>
            <select
                value={field.state.value}
                onChange={(e) => field.setValue(e.target.value)}
            >
                {options.map((option) => (
                    <option key={option.value} value={option.value}>
                        {option.text}
                    </option>
                ))}
            </select>
        </label>
    );
};

This of course would work, but there is no type-safety at a form-level.

type DefaultValues = {
    type: 'dog' | 'cat' | 'bird';
}

function Form() {
    const form = useAppForm({
        defaultValues: {
            type: 'dog',
        } as DefaultValues,
    });

    return (
        <form onSubmit={(e) => {
            e.preventDefault()
            form.handleSubmit()
        }}
            <form.AppField
                name='type'
                children={(field) => {
                    return (
                        <field.SelectField
                            label='type'
                            options={[
                                { text: 'Dog', value: 'dog' },
                                { text: 'Cat', value: 'cat' },
                                { text: 'Bird', value: 'INVALID VALUE FOR BIRD, should only accept "cat" | "dog" | "bird"' }
                            ]} />
                    )
                }}
            />
        </form>
    );
}

You can see that I am able to pass any options I want to my SelectField component, because the SelectOptions property accepts an array of objects with text and value of type string.

This could in theory be solved if we used generic parameters for the SelectField:

// pseudo-code
type SelectOptions<T> = {
    text: string
    value: T;
}

type SelectFieldProps<T extends FieldApi, K extends keyof FieldApi['TParentData']> = {
    label: string;
    name: K;
    options: SelectOptions<T[K]>[];
}

export const SelectField = <T extends FieldApi, K extends keyof FieldApi['TParentData']>({ label, name, options }: SelectFieldProps<T,K) => {
//
}

This is just pseudo-code, but it illustrates what I'm trying to achieve. If it worked, then in my example <field.SelectField ...> the options you would be able to pass would be constrained to options that are of a valid type only. Otherwise Typescript will throw an error (which is what we want).

Is it possible to achieve this?

[LeCarbonator]

@virtuallyunknown
With the current implementation, it wouldn't work. While the <field.SelectMenu/> appears to share information with the field, it's currently only used for autocompletion. It does not make a difference if you use <SelectMenu/> directly.

There's some ideas being thrown around with branding components in #1606 , but it's a draft for now. To get this feature to work now,
I suggest the following setup:

// select-menu.tsx
type SelectOption<T> = { 
   text: string;
   value: T
}

type SelectFieldProps<T extends string> = {
   // we don't care about the whole field, we only want the value as generic reference
   field: {
      state: {
         value: T
      }
   },
   label: string;
   // NoInfer ensures that you can't 'cheat' the system by TypeScript inferring T from the provided options.
   // You only want the field to be the source of truth.
   options: NoInfer<SelectOption<T>[]>
}


// main.tsx
<field.SelectField label="type" field={field} options={[
                                { text: 'Dog', value: 'dog' },
                                { text: 'Cat', value: 'cat' },
                                // Error! not assignable to 'cat' | 'dog' | 'bird'
                                { text: 'Bird', value: 'invalid' }
                            ]}