0

I am seeing this in Edge and IE. I have a checkbox which is being initialized using initialValues to true. On first visit its is displayed correctly as checked with a value of true, however after refreshing the page via the browser, the checkbox is not checked but still has a value of true. As i can continue to refresh the page the checkbox continues to switch in this way checked then unchecked on next refresh. redux form 7.2.3 react 15.6.2.

Thanks

Mathew
  • 379
  • 2
  • 12
  • 1
    The value of a checkbox and whether it is checked are two different things. Are you controlling the `checked` property? – Roy J Apr 27 '18 at 16:33
  • Thanks Roy. No not setting checked specifically as examples and every other browser except edge and ie11 seem happy with initial value of true alone. Is this in redux-form docs please? – Mathew Apr 28 '18 at 19:32
  • Looking at this: https://jsfiddle.net/e0t60u1n/ (unless I'm misunderstanding your statement) FF/Chrome/Edge all render the same. The way, per spec to state that a checkbox should be checked is using the `checked` property as @RoyJ stated. – gregwhitworth May 02 '18 at 04:25

2 Answers2

0

The value of a checkbox is what will be associated with its name if it is checked. Checking a checkbox should not change the value, it should change the checked property.

This is not specific to redux-form, it is just how form elements are intended to work. It looks like redux-form wants to use value instead, and it doesn't work right.

In any case, I think you want to specifically handle the checked property with something like checked={value}.

Roy J
  • 42,522
  • 10
  • 78
  • 102
  • 1
    Again thanks for your input on this however there is something more going on here with the field component in redux-form as event setting `` i can recreate the above behaviour. will post issue at gh. thanks – Mathew May 01 '18 at 19:59
  • Thanks for the response but i think there is a something else IE/Edge and redus-form related specific going wrong with checkboxes. I have created the [sandbox](https://codesandbox.io/s/2vn685yy0) and although this works as expected directly from the sandbox in Edge, if i download this and run it off a server i can recreate consistently. – Mathew May 02 '18 at 08:02
0

Roy's answer is correct. Adding some redux-form context, passing checked to a Field component will override the normal behaviour. The normal behaviour is to compare if the value stored in redux-form's state is the same as the value prop specified on Field if so the checked prop is true.

So for example if the store state is values: { test: true } and your Field has value={true} then the end result is the checked prop is true.

The F5 refreshing toggle most likely suggests that your values initialization is changing on each refresh. It's hard to help you beyond a general statement like this without clear reproduction steps.

Dan
  • 2,830
  • 19
  • 37