Input component support for ref?

6 posts, 0 answers
  1. Chad
    Chad avatar
    13 posts
    Member since:
    Jan 2020

    Posted 10 Mar 2020 Link to this post

    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.

  2. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 10 Mar 2020 Link to this post

    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

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Chad
    Chad avatar
    13 posts
    Member since:
    Jan 2020

    Posted 10 Mar 2020 in reply to Stefan Link to this post

    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.

  4. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 11 Mar 2020 Link to this post

    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

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Chad
    Chad avatar
    13 posts
    Member since:
    Jan 2020

    Posted 11 Mar 2020 in reply to Stefan Link to this post

    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

  6. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 12 Mar 2020 Link to this post

    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

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top