useFormState's type definition for values, expects a every field to be passed in instead of partial

🐛 Bug report

Current behavior

The values type in useFormState options, is expecting every field of the V type to be passed in. However normally when initializing a form, the component takes in the initial values as optional. It would be nice if the values type was Partial<V> instead of just V.

Steps to reproduce the bug

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  unstable_useFormState as useFormState,
  unstable_Form as Form,
  unstable_FormLabel as FormLabel,
  unstable_FormSubmitButton as FormSubmitButton,
  unstable_FormMessage as FormMessage,
  unstable_FormInput as FormInput
} from "reakit/Form";

type FormValues = {
  name: string;
  phoneNumber: string;
};

type Props = {
  initialValues?: {
    name?: string;
    phoneNumber?: string;
  };
};

export const RegistrationForm = (props: Props) => {
  const form = useFormState<FormValues>({
    baseId: "Registration",
    values: props.initialValues
  });

  return (
    <Form {...form}>
      <FormLabel {...form} name="name">
        Name
      </FormLabel>
      <FormInput {...form} type="text" name="name" />
      <FormMessage {...form} name="name" />
      <FormLabel {...form} name="phoneNumber">
        Phone Number
      </FormLabel>
      <FormInput {...form} type="text" name="phoneNumber" />
      <FormMessage {...form} name="phoneNumber" />
      <FormSubmitButton>Submit</FormSubmitButton>
    </Form>
  );
};

function App() {
  return <RegistrationForm />;
}

ReactDOM.render(<App />, document.getElementById("root"));

Expected behavior

Would expect values to be partially filled in, for defaults or already filled in stuff to be passed in.

Possible solutions

Use Partial<V> as values type

Environment

npx envinfo --system --binaries --npmPackages
npx: installed 1 in 3.176s

  System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
    Memory: 396.34 MB / 16.00 GB
    Shell: 5.4.2 - /usr/local/bin/zsh
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    Yarn: 1.17.3 - ~/git/kepler-tooling/ui-apps/vision/node_modules/.bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  npmPackages:
    @apollo/react-common: 0.1.0-beta.8 => 0.1.0-beta.8 
    @apollo/react-hooks: 0.1.0-beta.11 => 0.1.0-beta.11 
    @storybook/addon-actions: 5.1.9 => 5.1.9 
    @storybook/addon-links: 5.1.9 => 5.1.9 
    @storybook/addons: 5.1.9 => 5.1.9 
    @storybook/react: 5.1.9 => 5.1.9 
    @testing-library/react: 8.0.1 => 8.0.1 
    @types/color: 3.0.0 => 3.0.0 
    @types/graphql: 14.2.0 => 14.2.0 
    @types/hls.js: 0.12.4 => 0.12.4 
    @types/jest: 24.0.13 => 24.0.13 
    @types/lodash: 4.14.134 => 4.14.134 
    @types/moment-timezone: 0.5.12 => 0.5.12 
    @types/mousetrap: 1.6.2 => 1.6.2 
    @types/node: 10.14.9 => 10.14.9 
    @types/react: ^16.8.2 => 16.8.23 
    @types/react-dom: ^16.8.0 => 16.8.5 
    @types/react-router: 5.0.1 => 5.0.1 
    @types/react-router-dom: ^4.3.1 => 4.3.4 
    @types/react-virtualized: 9.21.4 => 9.21.4 
    @types/storybook__addon-actions: 3.4.3 => 3.4.3 
    @types/storybook__react: 4.0.2 => 4.0.2 
    @types/styled-components: 4.1.16 => 4.1.16 
    @types/uuid: 3.4.4 => 3.4.4 
    @types/victory: 31.0.20 => 31.0.20 
    @types/webpack: ^4.4.19 => 4.32.1 
    @types/webpack-env: 1.13.9 => 1.13.9 
    @types/yup: 0.26.22 => 0.26.22 
    @typescript-eslint/eslint-plugin: 1.11.0 => 1.11.0 
    @typescript-eslint/parser: 1.11.0 => 1.11.0 
    @welldone-software/why-did-you-render: 3.2.0 => 3.2.0 
    @wojtekmaj/react-datetimerange-picker: 2.1.0 => 2.1.0 
    apollo: 2.14.1 => 2.14.1 
    apollo-cache-inmemory: 1.6.2 => 1.6.2 
    apollo-client: 2.6.3 => 2.6.3 
    apollo-link: 1.2.11 => 1.2.11 
    apollo-link-context: 1.0.17 => 1.0.17 
    apollo-link-error: 1.1.10 => 1.1.10 
    apollo-link-http: 1.5.14 => 1.5.14 
    apollo-link-ws: 1.0.17 => 1.0.17 
    apollo-utilities: 1.3.2 => 1.3.2 
    babel-loader: 8.0.6 => 8.0.6 
    check-node-version: 4.0.1 => 4.0.1 
    color: 3.1.2 => 3.1.2 
    compression-webpack-plugin: 3.0.0 => 3.0.0 
    copy-webpack-plugin: 5.0.3 => 5.0.3 
    css-loader: 2.1.1 => 2.1.1 
    eslint: 6.0.1 => 6.0.1 
    eslint-config-prettier: 6.0.0 => 6.0.0 
    eslint-plugin-react: 7.14.2 => 7.14.2 
    eslint-plugin-react-hooks: 1.6.1 => 1.6.1 
    express: ^4.17.1 => 4.17.1 
    fast-deep-equal: 2.0.1 => 2.0.1 
    graphql: 14.2.1 => 14.2.1 
    graphql-anywhere: 4.2.4 => 4.2.4 
    graphql-tag: 2.10.1 => 2.10.1 
    hls.js: 0.12.4 => 0.12.4 
    html-webpack-plugin: 3.2.0 => 3.2.0 
    identity-obj-proxy: 3.0.0 => 3.0.0 
    istanbul: ^0.4.5 => 0.4.5 
    jest: 24.8.0 => 24.8.0 
    jest-canvas-mock: 2.1.0 => 2.1.0 
    jest-fetch-mock: 2.1.2 => 2.1.2 
    jest-junit: 6.4.0 => 6.4.0 
    jest-localstorage-mock: 2.4.0 => 2.4.0 
    konva: 3.3.2 => 3.3.2 
    localforage: 1.7.3 => 1.7.3 
    lodash: 4.17.11 => 4.17.11 
    moment-timezone: 0.5.25 => 0.5.25 
    mousetrap: 1.6.3 => 1.6.3 
    prettier: ^1.15.2 => 1.18.2 
    query-string: 6.6.0 => 6.6.0 
    react: 16.8.6 => 16.8.6 
    react-datetime-picker: 2.6.0 => 2.6.0 
    react-dom: 16.8.6 => 16.8.6 
    react-draggable: 3.3.0 => 3.3.0 
    react-konva: 16.8.7-2 => 16.8.7-2 
    react-router-dom: 5.0.1 => 5.0.1 
    react-toastify: 5.2.1 => 5.2.1 
    react-virtualized: 9.21.1 => 9.21.1 
    reakit: 1.0.0-beta.4 => 1.0.0-beta.4 
    rimraf: 2.6.3 => 2.6.3 
    style-loader: 0.23.1 => 0.23.1 
    styled-components: 4.3.2 => 4.3.2 
    subscriptions-transport-ws: 0.9.16 => 0.9.16 
    ts-jest: 24.0.2 => 24.0.2 
    ts-loader: 6.0.4 => 6.0.4 
    ts-optchain: 0.1.7 => 0.1.7 
    ts-toolbelt: 1.1.11 => 1.1.11 
    ts-transform-graphql-tag: 0.2.1 => 0.2.1 
    typescript: 3.5.2 => 3.5.2 
    typescript-plugin-styled-components: 1.4.3 => 1.4.3 
    use-query-params: 0.3.3 => 0.3.3 
    uuid: 3.3.2 => 3.3.2 
    victory: 32.3.3 => 32.3.3 
    webpack: ^4.35.0 => 4.38.0 
    webpack-cli: 3.3.5 => 3.3.5 
    webpack-dev-server: ^3.7.2 => 3.7.2 
    webpack-merge: ^4.2.1 => 4.2.1 
    workbox-webpack-plugin: 4.3.1 => 4.3.1 
    yup: 0.27.0 => 0.27.0 

[diegohaz]

It looks good! That’s the right approach in my opinion. 😃 Will close this for now.

[diegohaz]

Thank you for opening the issue @cross311!

I’d say that this is the intended behavior and it reflects the actual types you get at runtime. If you don’t pass in an initial value for a, form.values.a will be undefined.

So, if we change those types, we also need to modify the implementation and assign an initial value for a automatically, which I’m not sure is possible given that the only way useFormState can know about the form state structure is through the values option.

I don’t know if you have a specific use case that prevents this, but the most idiomatic way to do that is making your FormValues properties optional to match your initialValues prop on the component.