React-final-form: Can't access original (undefined) value of checkbox in custom adapter component

[ThiefMaster]

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: [email protected], [email protected]

[erikras]

You might be overthinking things... How about this?

[ThiefMaster]

Sure, that works - but in my actual code I'm also handling the case of a checkbox with a value (just like in the core, where the resulting value is an array of the checked options)... I just omitted it to keep my example more concise.

[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)

[ThiefMaster]

Thanks - also because that way I don't need to reimplement half of the getValue logic! :)

[dprea]

Another thanks from me - this helped me with an adapter for react-toggle as a checkbox that worked in webpack development mode but not in production mode.