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.
5 Answers, 1 is accepted
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
Rank 2
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.
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
Rank 2
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
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