React-final-form: [bug] typescript FieldRenderProps do not include custom props passed to Field

[mxdubois]

Are you submitting a bug report or a feature request?

bug report

What is the current behavior?

The typescript defs assume that only FieldRenderProps are passed to component, render, and children (https://github.com/final-form/react-final-form/blob/master/src/index.d.ts#L58-L69) when in fact FieldRenderProps AND "any non-API props passed into the component" are passed to component, render, and children.

This results in type errors when custom props passed to Field are required by the component:

Property 'label' is missing in type 'FieldRenderProps & { children?: ReactNode; }'.

23:11 Type '{ name: string; component: (props: FieldLayoutProps) => Element; label: string; Control: string; }' is not assignable to type 'IntrinsicAttributes & FieldProps & { children?: ReactNode; }'.
  Type '{ name: string; component: (props: FieldLayoutProps) => Element; label: string; Control: string; }' is not assignable to type 'FieldProps'.
    Types of property 'component' are incompatible.
      Type '(props: FieldLayoutProps) => Element' is not assignable to type 'string | ComponentClass<FieldRenderProps> | StatelessComponent<FieldRenderProps> | undefined'.
        Type '(props: FieldLayoutProps) => Element' is not assignable to type 'StatelessComponent<FieldRenderProps>'.
          Types of parameters 'props' and 'props' are incompatible.
            Type 'FieldRenderProps & { children?: ReactNode; }' is not assignable to type 'FieldLayoutProps'.
              Property 'label' is missing in type 'FieldRenderProps & { children?: ReactNode; }'.
    21 |       <div>
    22 |         <Field
  > 23 |           name="user.name"
       |           ^
    24 |           component={FieldLayout}
    25 |           label="Full Name"
    26 |           Control="input"

...assume FieldLayoutProps is minimally defined as:

export interface FieldLayoutProps extends FieldRenderProps {
  label: string;
  Control: string;
}

What is the expected behavior?

The typescript defs include "any non-API props passed into the component" in FieldRenderProps so that there is no compile-time type error when component requires props passed to Field.

This would match:

1. the docs: https://github.com/final-form/react-final-form#children-props-fieldrenderprops--reactnode--reactnode
2. the runtime behavior: https://github.com/final-form/react-final-form/blob/master/src/Field.js#L161-L172

What's your environment?

[email protected], [email protected]

using the tsc compiler options noImplicitAny and strictNullChecks

[randytorres]

any update on this?

[trejster]

Also have the same issue - any update?

[poteirard]

Is there a reason we are not using HTMLInputElement (from node_modules/typescript/lib/lib.dom.d.ts) for typing the input props?

[ebrillhart]

We are also encountering this problem and would very much appreciate a fix or workaround suggestions

[leonid-shevtsov]

A workaround I've found is to declare custom props optional (and add a big FIXME)

// FIXME making custom props optional until this is resolved: 
// https://github.com/final-form/react-final-form/issues/175
export interface FieldLayoutProps extends FieldRenderProps {
  label?: string;
  Control?: string;
}

[zalishchuk]

@erikras what is the current behaviour to use custom Field component prop with component whose props differ from FieldRenderProps in Typescript? I want to control the component passed to Field props, so making the props optional is not an option. Can we somehow pass props directly to Field if component prop is defined?

[Yankovsky]

@erikras any info about when it will be published?
Thanks for your great work by the way.

[erikras]

Published fix in v6.3.1.