final-form / final-form/react-final-form

FieldRenderProps type incorrectly includes an index signature

Open
#990 0 comments 2 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
7.4k
Forks
497
PR merge metrics
No merged PRs in 30d

Description

### Are you submitting a **bug report** or a **feature request**?

### What is the current behavior?

`FieldRenderProps` includes an index signature that incorrectly assumes the matching object can have any number of fields beyond `input` and `meta`. If you define a component whose props extend `FieldRenderProps`, you end up including the index signature which allows any prop to be passed into the component even if it is untyped and unused. This is not type safe and can result in missed prop handling.

### What is the expected behavior?
`FieldRenderProps` should not have an index signature included in its type since `input` and `meta` are the only two values explicitly defined within the field.

### Sandbox Link

[TypeScript sandbox with incorrect behavior](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgMWAUwDYBMBKaB2WaUAClBGAM4A0cArpWqplnAL5wBm5IcA5FDQBDAMYwAtJ2D4hGSdBB8A3AChQkWHDyj43CLwHCxylWvwxinUWjhkKlOGgAeFwg+bY8hYnaoAeShgoaQBzAD5EFThouAwhACNMAC44QOD8ENU2UxEIfEC4AFkATwBhfUh8AngAXjgACjByKhTfSgBKOBqI+qiYvyxgADcwvpj+uMSMMIQm+wA6Scw2PwB6Jemx8bg-aTA6eAR547mqeb2DjlXR8bXBkZV2nLyCgCFyAGsCZAUuhs7upFxrl8rp0Ng-gwmOCsPU+CBiuJTnx2qotoIYHQoPgGltbjdtoSEKsAFRFMoVPLVOAACyEDgABhsGXB6ay4IIAI50YCCVinWiUCBwGA04AOcUcoTi0LsmDFMA2YjkKBwEmrbKEwl+ErlcBU8x4rXjC4wGoIKQsc74fYwTXGrUgNAwITmy3YeZOl32h1wa5GomkuAAUSGxGKotlAHcbFGhOY4JLpCIMHQiFhaPhheLKHQ0A51T6HTqKfqqobfYTTW6YdbbUXK3Ava6LbXmw3KxsagAiADK+mdYoy3YD239jeJZN1lPL8EliVlYHpjFYQilhH0tDo5gVaH5zTg8QOcCzIt3jigKsTDig0pXao1o9u07L1SfWurratpo7vubNatdt30JLs+wHSNh2A7YKBgYAXh7AAJTAMGFKNoGwEdG3HLU1gJaJURUNggA)

### What's your environment?

React Final Form v6.5.9
Final Form v4.20.7
TypeScript v4.6.2

### Other information

The `FieldRenderProps` interface includes an [index signature](https://github.com/final-form/react-final-form/blob/334f0015989e15a10f6741b87955c535593f2bde/typescript/index.d.ts#L53). However, this index signature is unnecessary to how the type is used and results in poor type safety when used.

The interface is used for two pieces of the API, the `Field` component and the `useField` hook.

The `useField` type returns `FieldRenderProps` but the code [explicitly returns](https://github.com/final-form/react-final-form/blob/334f0015989e15a10f6741b87955c535593f2bde/src/useField.js#L231-L232) only `input` and `meta`. Thus, the index signature serves no purpose here.

The `Field` component uses `FieldRenderProps` to ensure that the props of the rendered component extend `FieldRenderProps`. In this context, the index signature also doesn't provide any benefit because a type with extra props will still extend `FieldRenderProps` ([example TS sandbox](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wG4AoUSWOAbzgDFgkAbAEwGUYUYk4BfONlwFMwAHYoWAWkzQQZcuRgBPMHyas2AWSTcuPJAB5N7AGpSArkgB8cALxwACsDQBrI+TiNm7A7xNfNgsWaxsAGi84AFEADzRQtmMo7zckFQhMHy1-Y1Ngq1tI728AIgAjUKhSuAAfOFK0AAsUcQBzJBr60rk0SwBnLobJEE66hoA3QtKom3IbCkpxXihMdA0ggElxMEsYJxwwfsCtEOtwuAAVOCRY3nE2frgACUvtABloliRR5YcXt6fb6-GBzby3e6POAAQXEKgA8uUAFZIDB0KIjJAALjg-RgUAkbQo3gg4gAQlUcQAKJATJDLAD8OOQ6BgADoGBA+v1onTlkZLjYAJQOOwTCDANjEuCkgDCLXa2LgNL5MGZxHZ8taHV59JgArs9VaKhF9jFEqlUVJnO51NpeqZiA1HK5A11-MFpvNkulqnUjrxBPa0qmoSV+TOSGlzVRaTYjvKEAg31a0pAlhYMGAYG+CaTKfEFH4SgkKzWaD4sIRyNR8FoUQA2mkVDjA4SALo441FpQAel7cAAchA4BIkrFccA2pIYJYiHBxEgkEk2ABCJZl9bZdjIB5IKAHCBHTzeCOFYpXG53elQ14fL4-PX-O9Ax-LC-bXYwSP-M9hyJ2PW3gSF+OL5J+eyHseEHfueVwLFEozcGBQS6Po3ABH+YQ9soah8HEkL9Pku5JAehzHAAGnYjgUVehHbmwJH7lBxyWOIbjiBAADu4h2AycD4tYcA4msLD9FGSh+nw2gqLKuCQIuywsf8tAsCg5SsK2+KEqQMpgFmpL9FpQZtA27b8IsaCGfAMBNMA-QcE0EAZmwZJIAwUjiTiBE3kRQRMWRR7HDJcngKSeosdRQieRJVniHiAl2Q5TkuQgKD2Uglx4dEUA4FA3nXg8flaAFLFGCF8nhUp5FRYJEm4eocAyT5e5sKFCkReR-wVWFin7F1ABkDGleRRhtu0CHkHFCW2fZjnOewbmXFA1gFYRxE3sxo3NYVK7tVV-VBbVK0SUAA))

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.