Fix FieldCheckbox blur validation on Firefox

CHANGELOG.md

@@ -14,6 +14,9 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2020-XX-XX
 
+- [fix] Fix FieldCheckbox validation on blur event on Firefox.
+  [#1384](https://github.com/sharetribe/ftw-daily/pull/1384)
+
 ## [v7.0.0] 2020-11-17
 
 This major release renames all the CSS files. If you have made custom components or customized

src/components/FieldCheckbox/FieldCheckbox.example.js

@@ -21,7 +21,7 @@ const FormComponent = props => (
             handleSubmit(e);
           }}
         >
-          <FormSpy onChange={onChange} />
+          <FormSpy onChange={onChange} subscription={{ values: true, dirty: true }} />
           <FieldCheckbox id="checkbox-id1" name="checkbox-group" label="option 1" value="option1" />
           <FieldCheckbox id="checkbox-id2" name="checkbox-group" label="option 2" value="option2" />
 

src/components/FieldCheckbox/FieldCheckbox.js

@@ -47,12 +47,13 @@ const FieldCheckboxComponent = props => {
   } = props;
 
   const classes = classNames(rootClassName || css.root, className);
-  const checkboxProps = {
-    id,
-    className: css.input,
-    component: 'input',
-    type: 'checkbox',
-    ...rest,
+
+  // This is a workaround for a bug in Firefox & React Final Form.
+  // https://github.com/final-form/react-final-form/issues/134
+  const handleOnChange = (input, event) => {
+    const { onBlur, onChange } = input;
+    onChange(event);
+    onBlur(event);
   };
 
   const successColorVariantMaybe = useSuccessColor
@@ -64,7 +65,19 @@ const FieldCheckboxComponent = props => {
 
   return (
     <span className={classes}>
-      <Field {...checkboxProps} />
+      <Field type="checkbox" {...rest}>
+        {props => {
+          const input = props.input;
+          return (
+            <input
+              id={id}
+              className={css.input}
+              {...input}
+              onChange={event => handleOnChange(input, event)}
+            />
+          );
+        }}
+      </Field>
       <label htmlFor={id} className={css.label}>
         <span className={css.checkboxWrapper}>
           <IconCheckbox className={svgClassName} {...successColorVariantMaybe} />

src/components/FieldCheckboxGroup/FieldCheckboxGroup.example.js

@@ -89,7 +89,7 @@ const formComponent = country => props => (
             handleSubmit(e);
           }}
         >
-          <FormSpy onChange={onChange} />
+          <FormSpy onChange={onChange} subscription={{ values: true, dirty: true }} />
           <FieldCheckboxGroup {...componentProps} />
 
           <Button style={{ marginTop: 24 }} type="submit" disabled={submitDisabled}>