Feature Request

We need to be able to exclude fields from the options of useControlled.

Describe the Feature

In a complex form with lots of subcomponents the place where you load the form values from the backend and set the default values on the form is in a different component than the fields.
The component where I do useForm({ defaultValues: { someSelect: 'foo' } }) has no idea how "someSelect" will be displayed (as a select / radios / input / etc).
In my case "someSelect" will be rendered with react-select meaning that I have a custom component using useControlled to wrap react-select. And it's in this custom wrapper where I need to tell the RCF to ignore the field.

There are 2 more reasons to consider implementing this change:

1. if I ever change react-select to something else which doesn't require excluding anything I will have to change 2 components: the select wrapper component and the one with the useForm to remove the exclusion.
2. in a highly dynamic form where users can add new fields (useFieldArray for example) it's very dirty (not DRY) to add logic to the component with useForm to exclude these dynamically added inputs.

👋🏻 Hi guys, this is Welly from Taiwan. I spend a lot of time in this library. I'd love to know which companies are using this library for their product(s) so I can mention you in the README and website.

Please share the following information with me:

• Company name (might be used in the README or website etc.)
• Company logo (might be used in the README or website etc.)
• What kind of product(s)?
• The URL of your product(s)

Bug Report

Describe the Bug

CSB: https://codesandbox.io/s/rcf-arrays-and-lists-forked-m9tem?file=/index.js

✔️ Initial render works ok
✔️ Pushing to the outer array works
🛑 Using the fieldName as the key in the loop leads to the exact same bugs as using the index: https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318#.6nz2tbgsw
Reproduction:

• start fresh with the csb
• note how iron man has 2 arr elements (iron arr.0 and iron arr.1).
• click on insert under the table to insert spider man with a single arr element
• notice how spider man has 2 arr elements and iron man just 1
  You either need to create a stable ID for each field when calling useFieldArray or making the actual field available to users and they can deal with making sure they have an id for each element.
  So either:

const [fields, { push, remove }] = useFieldArray(fieldName);
console.log(fields); // [{name:'arr[0]', id: '0fhdf-123gfu3-nenf73'}]

or

const [fieldNames, fields, { push, remove }] = useFieldArray(fieldName);
console.log(fieldNames); // ['arr[0]']
console.log(fields); // [{id:'abc123', firstName: 'my name', lastName: 'my other name'}]

🛑 Pushing to the inner array doesn't do anything. Click on any inner push button.
🛑 Resetting the form throws an error after you push/insert into the array
🛑 Resetting the form doesn't restore the initial arr for iron man (remove iron man and then reset - arr is now empty).

CodeSandbox Link

https://codesandbox.io/s/rcf-arrays-and-lists-forked-m9tem?file=/index.js

Package still being maintained?

Description

I want to use react-cool-form to only get state

BUT

When I try to use the hook, it's not working properly

• It doesn't prevent default of the form
• It's not update state (it's always init state)

Example of my code

function Component(props: ComponentProps) {
  const { form, submit } = useForm<DeepPartial<MentorPatchType>>()

  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    const state = await submit(event)
    const values = state.values

    console.log(values) // The init state, not changing when I change inputs but, in the examples I've seen, it should work!
  }

  return (
    <form ref={form} onSubmit={onSubmit}>
      <input type="submit" />
    </form>
  )
}

I used the simplest code ever, though it's still not working

function Component(props: ComponentProps) {
  const { form } = useForm<DeepPartial<MentorPatchType>>()
  return (
    <form ref={form}>
      <input type="submit" />
    </form>
  )
}

The question

What am I doing wrong?

Bug Report

Describe the Bug

When using useControlled to control a field, the reset function of the form does not change the value until you have focussed the field.

How to Reproduce

Using your Lazy Default Values example.

...

const ControlledField = ({ name, ...rest }) => {
  const [fieldProps] = useControlled(name);

  return <Field {...rest} {...fieldProps} />;
};

function App() {
  const { form, reset } = useForm({
    defaultValues: { firstName: "Test", lastName: "123" },
    onReset: (values) => console.log("onReset: ", values)
  });

  // This doesn't work, only after focus.
  useEffect(() => reset({ firstName: "Welly", lastName: "Shen" }), [reset]);

  return (
    <form ref={form}>
      <ControlledField label="First Name" id="first-name" name="firstName" />
      <Field label="Last Name" id="last-name" name="lastName" />
      <input type="submit" />

      {/* This doesn't work, only after focus. */}
      <button type="button" onClick={() => reset({ firstName: "henk" })}>Manual</button>
    </form>
  );
}

CodeSandbox Link

Show me the bug on CodeSandbox.

Expected Behavior

It should receive the new value after reset.

Your Environment

• Device: Mac
• Browser: Chrome / FireFox

Bug Report

Describe the Bug

validation does not work with useController

How to Reproduce

const validateRequired = (value) => {
  console.log(value);

  return false;
};

const Field = ({ name, ...restProps }) => {
  const [fieldProps] = useControlled(name, {
    ...restProps,
    defaultValue: null,
    formId: 'form1',
    validate: validateRequired,
  });

  return (
    <Form.Item label="Label">
      <Input {...fieldProps} />
    </Form.Item>
  );
};

function CoolForm() {
  count++;

  const { form, focus, use } = useForm({
    defaultValues: {
      test: [{ firstName: 'Bill', lastName: 'Luo' }],
    },
    onSubmit: (values) => console.log(values),
    onError: (errors) => console.log('onError: ', errors),
    id: 'form1',
  });
  const [fields, { push, insert, remove, swap, move }] = useFieldArray('test', { formId: 'form1' });

  /* console.log(
    "Field value: ",
    use({ value: "foo", touched: "touched.foo", dirty: "dirty.foo" })
  ); */

  return (
    <form ref={form}>
      <div className="count">Render {count} times</div>
      <Field name={`all`} />

...

Submit, and notice it submits correctly although does not pass validation

CodeSandbox Link

Show me the bug on CodeSandbox.

Expected Behavior

Tell me what should happen.

Screenshots

Add screenshots to help explain your problem.

Your Environment

• Device: [e.g. MacBook Pro, iPhone12]
• OS: [e.g. macOS, iOS, Windows]
• Browser: [e.g. Chrome, Safari]
• Version: [e.g. v1.0.0]

Additional Information

Any other information about the problem here.

Bug Report

Describe the Bug

When using Material UI + lazy default values, checkboxes & radio buttons are not checked.

How to Reproduce

Add a MUI checkbox to a form, and set corresponding field to true by lazy default values.

Please see sandbox link below.

CodeSandbox Link

https://codesandbox.io/s/rcf-material-ui-lazy-default-5e0uq

Expected Behavior

The checkbox should be checked initially.

Your Environment

• OS: MacOS
• Browser: Chrome
• Version: 89