Checkbox inside a FormElement does not appear to work as expected

1 Answer 316 Views

Checkbox

Dominic asked on 26 Jul 2021, 06:56 PM

When I try to put a checkbox inside a form element the checkbox does not check and uncheck as expected. If I just use a Checkbox outside of a FormElement tag it works as expected. I noticed the first example on this page https://www.telerik.com/kendo-react-ui/components/inputs/checkbox/forms-support/ acts similarly to mine. Is this a known issue? Is there a working sample I could use?

<Form
onSubmit={handleSubmit}
render={(formRenderProps) => (
<FormElement>
<fieldset className={"k-form-fieldset"}>
<div className="mb-3">
<Field
name={"active"}
component={Checkbox}
label={"Active"}
value={active}
onChange={handleActiveChange}
/>
</div>
</fieldset>
<div className="k-form-buttons">
<button
type={"submit"}
className="btn btn-primary btn-sm"
disabled={!formRenderProps.allowSubmit}
>
Submit
</button>
</div>
</FormElement>
)}
/>
 
 
 

Dominic

commented on 26 Jul 2021, 10:05 PM

Does not seem to work on the first form on this link either. https://www.telerik.com/kendo-react-ui/components/form/guidelines-with-examples/

1 Answer, 1 is accepted

answered on 27 Jul 2021, 07:23 AM

Hello Dominic,

Yes, this is a known issue and it was already fixed.

You can check the status here and see when the implementation is officially released:

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

You can also use the `initialValues` Form property about the Checkbox value and the issue won't exist.

For example, you can check the following Stackblitz code:

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

For more information about the `initialValues` property you can check the following API reference:

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

Please let me know if you need more assistance.

Regards,
Ina
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Dominic

commented on 27 Jul 2021, 11:33 AM

Thanks updating to the v4.8.0-dev.202107231243 version did fix my problem. Do you know when v4.8.0 is planned for general release? I am good with using it for my current POC/Prototype, but obviously want this to be a production release before we look at using it for production code.

Krissy

commented on 27 Jul 2021, 01:33 PM

Hi Dominic,

Version 4.8.0. is planned to be released tomorrow.
Additionally, you can keep track of the milestones here:
https://github.com/telerik/kendo-react/milestones

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Resources

Productivity and Design Tools

Checkbox inside a FormElement does not appear to work as expected

1 Answer, 1 is accepted