Mention in the docs that you can't pass any prop to the "as" component in a Controller with the same name as the props the controller may have

[Sleepful]

Mention in the docs that you can't pass any prop to the "as" component in a Controller with the same name as the props the controller may have

Somewhere in the Get Started it mentions that props for "as" component get overridden if they have the same name as Controller props, however this is not mentioned in the API:
https://react-hook-form.com/api#Controller
Furthermore, it does not mention that even props not supplied to but that may have also override props in "As" component.

For instance, even if I am not passing a prop "onChange" to , if I pass a prop "onChange" to "as" then it gets overridden by 's default "onChange".

[bluebill1049]

can you explain that in code?

Controller onChange is made for the use case of a payload is not an event alike object, for example, react-select.

onChange(e: ) {
  console.log(e) <-  it's an object instead of e.target.value
}

take a look this codesandbox for reference: https://codesandbox.io/s/react-hook-form-controller-079xx

[Sleepful]

For example:

    <Controller
      as={<SomeComponent onChange={()=>console.log("change")} />}
      control={control}
      name={name}
      rules={inputRef}
      value={value}
    />

inside SomeComponent the onChange prop will be replaced by the Controller's onChange's default prop, even though it wasn't passed to Controller. This means that if I do:

console.log(props.onChange.toString()) inside SomeComponent I get this output:

(event) => {
        const data = commonTask(event);
        setValue(name, data, shouldValidate());
    }

the same from this file

The "Get Started" section mentions something about this in the "Controller" part:
https://react-hook-form.com/get-started/#ControlledInput
where it says:

      {/* Option 2: pass a JSX element to the Controller. */}
      {/* Note that any prop passed to the element will be overriden. */}
      {/* In this case, "SomeName" will be changed to "MyCheckbox". */}
      <Controller
         as={<Checkbox name="SomeName"/>}
         name="MyCheckbox"
         control={control}
         defaultValue={false}
      />

but I don't think it's clear enough about props that Controller may have but aren't required. Additionally the documentation doesn't mention anything about props being overridden:
https://react-hook-form.com/api/#Controller

[bluebill1049]

it's open source as well, feel free to contribute. The next version will have render props, so things maybe more clear for you.

[Sleepful]

Maybe I will, first I open an issue in case I misunderstood something about how it works.

I am also confused about the value="test" prop found in the "Get Started" section of the Controller but not documented in the API?

[bluebill1049]

good pick up, that's a mistake.

[bluebill1049]

i will amend it now.

[bluebill1049]

oh wait, that's for the value of that checkbox, if it's checked.

<input type="checkbox" value="test" defaultChecked={true} />

but i will still remove it, cause it will cause confusion for users who is not familiar with it.