Form initialvalues Do Not Work with Switch

4 posts, 1 answers
  1. Kyle
    Kyle avatar
    39 posts
    Member since:
    Aug 2011

    Posted 05 Jan Link to this post

    When setting the initialValues of the Form component, it seems to work for everything I've used so far, except for a Switch. If I use a CheckBox instead, it seems to work fine.

    I've created a StackBlitz using snippets from your own docs: https://stackblitz.com/edit/react-s8ugrr-c3bw3k?file=app/main.jsx

    If you change FormSwitch to FormCheckbox on line 117, you can see what I mean.

    I'm setting the initialValues object to be in the following format:

    { mySwitchControlName: true }

  2. Answer
    Stefan
    Admin
    Stefan avatar
    3004 posts

    Posted 06 Jan Link to this post

    Hello, Kyle

    Thank you for your example.

    This occurs as the Switch uses the checked prop to determine its checked status:

    https://www.telerik.com/kendo-react-ui/components/inputs/api/SwitchProps/#toc-checked

    This is described in the last commend here:

    https://github.com/telerik/kendo-react/issues/650

    As the value props are already used for different information, the Switch defers from the other Form components.

    There are two options:

    1) inside the custom FormSwitch component, set the value coming from fieldRenderProps to the checked prop:

    https://stackblitz.com/edit/react-s8ugrr-8k8clt?file=app/main.jsx

                <Switch
                    ref={editorRef}
                    ariaLabelledBy={labelId}
                    ariaDescribedBy={`${hintId} ${errorId}`}
                    valid={valid}
                    id={realId}
                    disabled={disabled}
                    checked={value}
    2) Use the Checkbox component as an alternative to collect boolean values.

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. Kyle
    Kyle avatar
    39 posts
    Member since:
    Aug 2011

    Posted 06 Jan Link to this post

    I don't think I have a problem with the first solution as long as it returns true/false as part of the values object for onSubmit/onSubmitClick.

    Should the examples/docs be updated so that the FormSwitch components use this?

    Thank again.

  4. Stefan
    Admin
    Stefan avatar
    3004 posts

    Posted 07 Jan Link to this post

    Hello, Kyle,

    Yes, we will update the docs to reflect this change.

    Regards,
    Stefan
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top