Path<TFieldValues> not being inferred correctly

[GarrisonBates]

I've extracted out a component for a specific input that's used across several forms:

import { useMembers } from '@frontend/api/queries/members/useMembers'
import { RHFCombobox } from '@frontend/components/forms/reactHookForm/RHFComboboxV2'
import Loading from '@frontend/components/Loading'
import { Control, FieldErrors, Path } from 'react-hook-form'

type MemberInputSchemaType = { memberId: number }

interface MemberInputProps<TFieldValues extends MemberInputSchemaType> {
  control: Control<TFieldValues>
  errors: FieldErrors<TFieldValues>
  queryResult: ReturnType<typeof useMembers>
}

export const MemberInput = <TFieldValues extends MemberInputSchemaType>({
  control,
  errors,
  queryResult,
}: MemberInputProps<TFieldValues>) => {
  const { isPending, error, data: members } = queryResult
  if (isPending) return <Loading className="overflow-hidden" />
  if (error) throw error

  return (
    <RHFCombobox
      control={control}
      name='memberId'
      label="Member"
      options={members}
      getKey={(option) => option.displayName}
      getOptionValue={(option) => option.memberId}
      errors={errors}
    />
  )
}

However, no matter what I try I'm getting this TS error:

Type '"memberId"' is not assignable to type 'Path<TFieldValues>'.ts(2322)
RHFComboboxV2.tsx(24, 3): The expected type comes from property 'name' which is declared here on type 'IntrinsicAttributes & RHFComboboxProps<TFieldValues, Member, unknown>'
const name: "memberId"
(property) name: Path<TFieldValues>

Does anyone have any insight on why TS is unable to see that memberId is indeed a path in the form? I thought my use of generics addressed this, but it clearly doesn't.

Edit: I should add that I don't think RHFCombobox is relevant to this. Because even if I try to do something like:

const name = 'memberId' satisfies Path<TFieldValues>

I get

Type '"memberId"' does not satisfy the expected type 'Path<TFieldValues>'.ts(1360)

[rayanakarthikeyan]

This reproduces without the combobox implementation. Path<T> is computed through conditional types, and TypeScript cannot resolve all of those paths while TFieldValues is still generic. The constraint guarantees that memberId exists, but does not make the assignment to Path<TFieldValues> check successfully inside the generic function. satisfies still performs that same assignability check.

For your fixed-name wrapper, a narrow assertion at this boundary works:

// Keep: TFieldValues extends { memberId: number }
const memberName = 'memberId' as Path<TFieldValues>;

Pass name={memberName} to the combobox. Keep control typed as Control<TFieldValues>; it does not need to be cast to a different form type.

If you want the wrapper to support different field names, move the name into its props and let the caller's concrete form type check it:

import type {
  Control,
  FieldErrors,
  FieldPathByValue,
  FieldValues,
} from 'react-hook-form';

type MemberInputProps<T extends FieldValues> = {
  control: Control<T>;
  errors: FieldErrors<T>;
  name: FieldPathByValue<T, number>;
  // Keep your queryResult prop here too.
};

Inside MemberInput<T>, forward that name prop to the combobox. At the call site:

// control/errors from useForm<{ memberId: number; title: string }>()
<MemberInput control={control} errors={errors} name="memberId" />

name="title" is then rejected because its value is a string; a missing path is rejected too. If the real field can be absent, use FieldPathByValue<T, number | undefined> instead.

AI-assisted verification: a minimal reproducer with TypeScript 5.9.3 and RHF 7.90.0 reproduces the original error, compiles both approaches, and rejects string-valued/missing paths for the prop-based approach. This checks the type boundary, not your private combobox implementation. RHF's path type definitions show the conditional Path and FieldPathByValue machinery.