KendoReact and react-hook-form

Question

I am having trouble using KendoReact components with the react-hook-form library:

<Controller
   as={Input}
   name="firstName"
   control={control}
   defaultValue="type something here"
/>

Stackblitz sample here

The react-hook-form sample is using MaterialUI components to show third-party libraries integration and that appears to be working properly. When using the Kendo Input component, typing anything in the input control results in the control showing [object Object] instead of the typed value. That's because the value that gets to be set on the control is the event object instead of the actual value.

I can't find a way around this, hopefully somebody else did find one.

azium azium · Accepted Answer · 2020-04-23T20:38:39

Creating a simple wrapper around the Input to get the value from onChange would work:

const InputWrapper = props => {
  return <Input {...props} onChange={e => {
    props.onChange(e.target.value)
  }} />
}

...

  <Controller
    as={InputWrapper}
    name="firstName"
    control={control}
    defaultValue="type something here"
  />

stackblitz

KendoReact and react-hook-form

1 Answers