search

kettanaito / react-advanced-form

Functional reactive forms. Multi-layer validation, custom styling, field grouping, reactive props, and much more.
https://redd.gitbook.io/react-advanced-form
MIT License
217 stars 24 forks source link

Checkbox does not update when 'checked' property is set to state property #397

Closed daisygabi closed 5 years ago

daisygabi commented 5 years ago

Environment

What

Current behavior

Please describe how it behaves at the moment. I am trying to update the 'checked' property in a form after an async operation. However the checked property does not seem to change. I have reproduced this problem in this sample and it's without async (so not important). Here is the code: https://codesandbox.io/s/musing-elion-iic9q?fontsize=14

What am I doing wrong?

Expected behavior

When the state value is true it should show the checkbox as checked and when the state value is false it should show it as unchecked.

Why

Why do you think the issue occurs? At first I thought it's about async and it has an issue with this, but after the bug reproduction which does not use async i realized that it's not that. I couldn't figure out why so far.

How

Steps to reproduce the issue (ideally, link to the repository/sandbox). https://codesandbox.io/s/musing-elion-iic9q?fontsize=14

daisygabi commented 5 years ago

This is a saved sample code. https://codesandbox.io/embed/cranky-edison-zso5c

kettanaito commented 5 years ago

Hello, @gabrielaradu. Thanks for reporting that!

I'm sorry to hear that you've experienced this issue. That appears to be an old problem with how checkboxes are handled by the library in general. If you are interested, I will provide more technical details below.

Original mention:

https://github.com/kettanaito/react-advanced-form/blob/9744b79b0c7de915d543f26b4aab64eaee6dfd82/src/components/createField.jsx#L142-L144

Technical details

However, there is a technical implication due to the lack of such thing as initialChecked, an analog to initialValue for value of an uncontrolled input. There is no prop-level flag to determine if a checkbox is controlled or not: both controlled and uncontrolled checkbox use checked as a value holding prop.

What to do?

That being said, there is a workaround how to operate with the checkbox value. There is a method on Form called setValues(). It allows to set values of a single or multiple fields at a given point of time.

In your case you would need to set the value of the checkbox1 field depending on your state. Here's a draft:

constructor() {
  // Creating a ref to store the Form
  this.formRef = React.createRef()
}

// button click handler
changedState = () => {
  this.formRef.current.setValues({
    checkbox1: nextValue
  })
}

// render part
<Form ref={this.formRef}>

The sandbox with the working scenario: https://codesandbox.io/s/raf-controlled-checkbox-qdv1k

I know this is not the best solution, and I would like to design a better state update logic for several reasons, including this issue.

Please let me know if that helped. Feel free to ask any questions or communicate issues/suggestions. Always happy to hear both.

kettanaito commented 5 years ago

Also, if you have an idea how to handle controlled checkboxes, please share it here. I'm (passively) working on a rewrite of this library and this is one of the things it needs to cover. Thanks.

kettanaito commented 5 years ago

I'm closing this since there is no better solution than the one suggested above.

Still let me know whether that helps, and in case you have any issues. Thanks.

daisygabi commented 5 years ago

Sorry for this late reply. It took me a while to understand the way this works, I was/am learning React.js and JavaScript. I understand now what you said and keep using this with controlled components (it fits my requirements). Thank you a lot for your detailed response.

kettanaito commented 5 years ago

@gabrielaradu No worries! I'm glad it was helpful. Once more my apologies for the inconvenience.