This is a migrated thread and some comments may be shown as answers.

Form initialvalues Do Not Work with Switch

3 Answers 556 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Kyle
Top achievements
Rank 2
Veteran
Kyle asked on 05 Jan 2021, 03:30 PM

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 }

3 Answers, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 06 Jan 2021, 06:22 AM

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/.

0
Kyle
Top achievements
Rank 2
Veteran
answered on 06 Jan 2021, 07:05 PM

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.

0
Stefan
Telerik team
answered on 07 Jan 2021, 06:07 AM

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/.

Tags
General Discussions
Asked by
Kyle
Top achievements
Rank 2
Veteran
Answers by
Stefan
Telerik team
Kyle
Top achievements
Rank 2
Veteran
Share this question
or