Checkbox loses attribute "value"

[Slavenin]

I create a checkbox with stateless function and set value. If checkbox changed - my value set to true or false. If i uncheck checkbox why checkbox exists in state? In simple html form if checkbox is not checked by form submit he not submited to server.

In previous version value in state be true or false. Now - true or undefined. But not value that i set in start

Sandbox link https://jsfiddle.net/Slavenin/o31L5ns2/2/

[heymackey]

Also experiencing this too. This looks like regression in 6.7.0.

If you inspect the Employed checkbox input between these two versions, you'll see the error too. Or just look at the values output between the two.

http://redux-form.com/6.7.0/examples/simple/
Unchecked: <input value /> and Checked: <input value="true" />

http://redux-form.com/6.6.3/examples/simple/
Unchecked: <input value="false" /> and Checked: <input value="true" />

[Slavenin]

Why value may by only true ot false? In my case it can have any value - 1,2,3 or uuid! Why change attribute value? Checkbox have checked attribute.

[evgeny-myasishchev]

Same here, unchecked checkbox yields empty value instead of false. Rolled back to 6.6.3 and it works there.

[Slavenin]

I am not need false! I need my setted value 1,2,3 or any other!

[mvirbicianskas]

having the same issue. Locking out to 6.6.3 fixes it. Would be great to see how we could work around this. Because now if checkbox is checked and then unchecked its payload is "" (empty string) and is removed from form's state :(
@erikras any updates on that? or is our approach wrong altogether? :(
personally what I'm using is just fields with unique names which expects value true/false which in 6.7.0 now is true/""

[stunaz]

Experimented the same issue - the onBlur method set it empty

[mvirbicianskas]

also, i'm curious why the decision was made for checkbox field to be removed from form state altogether? It's a checkbox and it cannot be undefined, because this is a field with value, either checked or unchecked, IMO this cannot be checked or non-existant_field

[Slavenin]

Can anybody tell me why the value is replaced to a boolean type?

<form>
    <input type="checkbox" name="list[]" value="1">
    <input type="checkbox" name="list[]" value="2">
    <input type="checkbox" name="list[]" value="3">
</form

In this case boolean is nothing! In state will be selected checkbox value, not true or false, because on server this nothing!

[jacklj]

@Slavenin - you can label the checkboxes with anything you like ("1", "2" etc), but each checkboxes' value will be either true or false, as a checkbox can either be checked or not checked - it's a boolean input element.

[Slavenin]

@jacklj, you're wrong. See my example code in previous comment. Where you see label? Checkbox is input. Input have value that send to server https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox ! If i have 3 checkboxes in group and only two selected - on server will send this two values. Checkbox have checked attribute that corresponding by it state.

[kromit]

@Slavenin - I think you are right, but all previous versions worked with true/false values so the functionality should be restored first.

[Slavenin]

@kromit, maybe, if input having not empty attribute value - use him, if not - using true/false

[kimorq]

<Field component="input" name="currently" id="currently" type="checkbox" normalize={v => !!v} />
Adding normalize and transforming the value to boolean worked for me

[zcherries]

I'm having this problem too.

[project707]

This is possibly going to be something really simple, but with the solution using normalize mentioned above, i can see that the values of unchecked boxes are false:
<Field name="copy" component="input" type="checkbox" normalize={v => !!v} />

However all of the false values (and keys) are nonexistent in values when I access that object via handleSubmit. Maybe I'm doing something wrong, or maybe this is why some people are still reporting that this is broken for them...

[danielrob]

@Slavenin's issue has been completely hijacked by people essentially re-reporting #3162 but is this is not the issue being reported here.

@Slavenin this is an interesting point. I'm not 100% certain why or when the decision was made that checkboxes have only boolean values, but it was mostly likely that it was the most sensible default behaviour. You can stray from the default by creating a custom checkbox component. For example, you can change the onChange handler like so:

const value = "value must be a string, use JSON.stringify() + JSON.parse() for more complex value types"
...
onChange={e => this.props.input.onChange(e.target.value)}
value={value}
checked={this.props.input.value === value}

[Slavenin]

@danielrob, something like this i do. But this is wrong because value is value. Cheked or unchecked state is checked attribute.

[shawnphoffman]

I'd like to bump this issue and start out by saying that I'm really surprised that the checkbox behavior is implemented this way. Assuming that a checkbox is simply a boolean input of true or false (true or '' actually) is not correct and is directly opposed to how normal HTML checkboxes are expected to behave. Having multiple checkboxes (FieldArray) with this project makes them basically useless without creating a HOC or other "corrective" measures.

For more information on how checkboxes are expected to behave, I submit the MDN documentation. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
Specifically, I think the section about Handling Multiple Checkboxes is pretty key to this discussion.

[erikras]

redux-form treats <input type="checkbox"/> as booleans. I don't really understand what it means for a checkbox to have a value. You will need to create some custom component to handle using checkboxes to manage an array of values. It's not that hard. Here's an example I whipped up in a few minutes:

The checkbox behavior with '' is broken and about to be fixed in the next version.

[erikras]

Fixed by #3482.

[kromit]

if you want to have an array of checkbox values instead of booleans, you can use this quick and dirty checkbox component:
https://codesandbox.io/s/0789prwv0

[erikras]

Published fix in v7.1.0.

[AKNiazi]

The problem seems to be fixed in the new release

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.