Form Reader returns "on" for checkboxes

[twschiller]

Context

• 1.7.10
• Click into a provider detail screen: https://reacthealth.pixiebrixtodd.repl.co/providers
• The Form Reader is returning "on" instead of true/false, even when the checkbox is unchecked

Button is defined using React Bootstrap:

<Form.Group className="mb-3" id="formGridBoardVerified">
   <Form.Check name="boardVerified" label="Certificate Verified" checked={values.boardVerified} onChange={handleChange} />
</Form.Group>

Which is rendered as:

<div id="formGridBoardVerified" class="mb-3 form-group"><div class="form-check"><input name="boardVerified" type="checkbox" class="form-check-input"><label title="" class="form-check-label">Certificate Verified</label></div></div>

[twschiller]

Hmm, also having some issues setting the checkbox values now with the Form Fill brick. Had it working previously 🤔

[fregante]

I could look into this

[twschiller]

Form Fill is working on the https://pbx.vercel.app/bootstrap-5/ checkboxes. So I suspect Form Fill is a quirk with the demo portal I was making

You can't test Form Reader on https://pbx.vercel.app/bootstrap-5/ because those fields don't have names, so the Form Reader doesn't pick them up

[fregante]

Feels like I implemented this logic so many times in my lifetime. When it gets complex enough, I generally fall back to https://github.com/jefersondaniel/dom-form-serializer, a relatively unknown but stable dependency I still use in webext-options-sync.

What do you think we make our form reader (@pixiebrix/forms/data) and writer (@pixiebrix/form-fill) use that? The good part about the module is that it serializes and deserializes the data. The only logic we'd have to keep would be around the contentEditables. However I'm not sure how practical it is to bend it around the raw selector usage in form-fill.

For a quick fix, I can replicate this logic:

https://github.com/pixiebrix/pixiebrix-extension/blob/e2d635a3e883fc682372f378b76bd46b404dccd3/src/blocks/effects/forms.ts#L102-L115

[fregante]

• The Form Reader is returning "on" instead of true/false, even when the checkbox is unchecked

Here's why it's happening:

• radios and checkboxes are of fixed "on" string value, unless a specific value is set
• when unchecked, they aren't submitted at all

You can verify the latter with the now-native reader:

Object.fromEntries(new FormData(document.querySelector('form')))