Can't access original (undefined) value of checkbox in custom adapter component

I’m using semantic-ui-react where the change event from the Checkbox field originates from a <label>, which makes the getValue logic useless for it. I tried implementing it myself on the adapter component which almost works (even arrays are fine, thanks to useField giving me access to the current value inside the adapter).

However, for simple boolean components I got stuck with a strange issue where I can’t find any solution except explicitly specifying with a different prop whether the checkbox is in boolean mode or string array mode. Try checking and then unchecking it in my simplified example below:

https://codesandbox.io/s/react-final-form-simple-example-hm03e

I think this is caused by this code:

  const input: FieldInputProps = { name, value, type, ...handlers }
  if (type === 'checkbox') {
    if (_value === undefined) {
      input.checked = !!value
    } else {
      input.checked = !!(Array.isArray(value) && ~value.indexOf(_value))
      input.value = _value
    }
  }

input.value defaults to the current value, and it’s only overwritten with the prop value _value if it’s not undefined. As a workaround I can check for typeof valueProp === 'boolean' in addition to undefined, but that feels very ugly.

I guess this is also why I need to specify format={v => v} for my Checkbox field, since otherwise I end up with input.value === '' inside the adapter.

Versions used: react-final-form@6.3.0, final-form@4.16.1

[ThiefMaster]

Thanks - also because that way I don’t need to reimplement half of the getValue logic! 😃

[erikras]

Okay, for that, you’ve got to mimic a standard input. This code here needs to be able to figure out, from the “event” you pass to onChange, what the type, value, and checked values are.

Et voilà: (line 41)