Input component support for ref?

[Chad]

I have created a form that will allow users to add items to a list on submit. I used an example and have been trying to rework it using the Kendo UI components but have run into an issue with my Input fields.

My code works when I am using a standard <input> but not when I switch to <Input>. I believe this has to do with the KendUI Input not supporting ref. I am importing the Kendo React Input.

The following works

<input
   ref={(a) => this._inputElement = a}
   placeholder="First Input"
/>

This does not

<Input
  name="firstname"
  style={{ width: "25%" }}
  label="First Name"
  pattern={"[A-Za-z]+"}
  minLength={2}
  required={true}
  ref={(a) => this._inputElement = a}
/>

Does the KendoUI Input support ref?

I can supply the full body of the example code if necessary.

Thanks in advance for any assistance.

[Stefan]

Hello, Chad,

All KendoReact components, including the Input component, have access to the ref.

This is an example of accessing the Input ref:

https://stackblitz.com/edit/react-agzuqc?file=app/main.jsx

If there is a specific setup where the ref is not available, please send it to us and I will be happy to investigate what could be causing this.

Regards,
Stefan
Progress Telerik

[Chad]

Attaching the two files that are used. AddDynamically.js and TodoItems.js for reference. When the application runs, using the <Input> setup, which is commented out, the fields never reset like they do when using the <input> setup.

Let me know what I am missing please.

[Stefan]

Hello, Chad,

Thank you for the files.

I used one of them that had the Inputs, and the ref of all three Inputs are available:

https://stackblitz.com/edit/react-agzuqc-nxjisw?file=app/main.jsx

Also, I see that is is made in a form, and I can recommend our Form component, as it provides nice features for controlling the form value, state, etc:

https://www.telerik.com/kendo-react-ui/components/form/

Regards,
Stefan
Progress Telerik

[Chad]

Thank you for the response, the issue I am running into is the action to clear the input fields after button click. The information is getting passed and is displayed for a short time and then when the action to clear the values in the inputs fires I get the following error.

 

TypeError: Cannot set property value of #<Input> which has only a getter

 

Is there an easy way to set the inputs to empty? I am trying this method for the clear.

this._inputElement.value = ' ';

and it appears to be getting hung up on line 43

[Stefan]

Hello, Chad,

This is expected as the value prop is only a getter.

Setting the value of an element via the ref is not the recommended approach. Yes, this is technically possible with the standard input, but still not recommended in the React world.

If the value of a component has to be changed programmatically, them the input has to be in controlled mode:

https://reactjs.org/docs/forms.html#controlled-components

Also, our Form component has a built-in method that clears the entire form:

https://www.telerik.com/kendo-react-ui/components/form/api/FormRenderProps/#toc-onformreset

 

Regards,
Stefan
Progress Telerik