fix: checkboxes and radios being updated every two clicks (#273)

* checkboxes are now updated on every click no matter if it is connected
or not

* radios now have et radiogroup from reakit and therefore, work without
an onChange prop

Fixes #203

Signed-off-by: Paul-Xavier Ceccaldi <[email protected]>

src/components/ConnectedField/doc.mdx

@@ -217,6 +217,7 @@ You can find additional props for each field component in [Fields](/fields/file-
               />
               <ConnectedField name="profile" component={FileUpload} label="Profile pic" mb="xl" />
               <ConnectedField
+                dateIcon={<Icon name="celebrate" size="sm" color="nude.600" />}
                 name="partyDate"
                 component={DateTimePicker}
                 label="Party date"

src/components/Field/doc.mdx

@@ -343,7 +343,7 @@ You can find additional props for each field component in [Fields](/fields/file-
         <Field
           name="swatch"
           component={Toggle}
-          label="Disabled switch example"
+          label="Disabled swatch example"
           disabled
           checked={!!values.swatch}
           onChange={handleChange}

src/components/Field/index.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, Fragment, useRef } from 'react'
+import React, { forwardRef, Fragment, useRef, useState } from 'react'
 import {
   array,
   arrayOf,
@@ -62,6 +62,8 @@ export const Field = forwardRef(
 
     const inputRef = useRef()
 
+    const [isCheckboxChecked, setIsCheckboxChecked] = useState(checked)
+
     const baseType = getBaseType(type || Component.displayName)
     const variant = getVariant({ connected, touched, warning, error })
     const hintText = getHintText({ connected, touched, warning, error, hint })
@@ -74,26 +76,21 @@ export const Field = forwardRef(
     const htmlFor = makeUnique(isRadio ? value : id || name)
 
     const handleLabelClick = () => {
+      if (isCheckable) return
       const input = inputRef.current
       if (input) {
-        switch (Component.displayName) {
-          case 'InputRadio':
-          case 'RadioTab':
-          case 'Checkbox':
-            break
-          case 'MarkdownEditor':
-            input.simpleMde.codemirror.focus()
-            break
-          default:
-            input.focus()
-        }
+        Component.displayName === 'MarkdownEditor'
+          ? input.simpleMde.codemirror.focus()
+          : input.focus()
       }
     }
 
+    const handleChecked = () => (baseType === 'checkbox' ? isCheckboxChecked : checked)
+
     const field = (
       <Component
         autoFocus={autoFocus}
-        checked={checked}
+        checked={handleChecked()}
         connected
         disabled={disabled}
         flexDirection={layout}
@@ -107,6 +104,7 @@ export const Field = forwardRef(
         placeholder={placeholder}
         ref={inputRef || ref}
         required={required}
+        setIsCheckboxChecked={setIsCheckboxChecked}
         size={size}
         type={baseType}
         value={value}
@@ -120,7 +118,7 @@ export const Field = forwardRef(
     return (
       <S.Field
         checkableField={isCheckable}
-        checked={checked}
+        checked={handleChecked()}
         fieldType={Component.type}
         flexDirection={layout}
         size={size}

src/components/InputCheckbox/index.js

@@ -6,9 +6,26 @@ import { FINAL_FORM_INPUT_TYPES } from '../../utils'
 import * as S from './styles'
 
 export const InputCheckbox = forwardRef(
-  ({ Component = S.InputCheckbox, name, order, ...rest }, ref) => (
-    <Component id={name} name={name} order={order} ref={ref} {...rest} />
-  )
+  (
+    { checked, Component = S.InputCheckbox, name, onChange, order, setIsCheckboxChecked, ...rest },
+    ref
+  ) => {
+    const toggle = () => setIsCheckboxChecked(!checked)
+    const handleChange = e => onChange && onChange(e)
+
+    return (
+      <Component
+        checked={checked}
+        id={name}
+        name={name}
+        onChange={handleChange}
+        onClick={toggle}
+        order={order}
+        ref={ref}
+        {...rest}
+      />
+    )
+  }
 )
 
 InputCheckbox.type = 'InputCheckbox'

src/components/InputRadio/index.js

@@ -1,12 +1,11 @@
 import React, { forwardRef } from 'react'
-import { bool, elementType, func, number, string } from 'prop-types'
-import { useRadioState } from 'reakit/Radio'
+import { bool, elementType, func, number, object, string } from 'prop-types'
 
 import * as S from './styles'
 
-export const InputRadio = forwardRef(({ name, order, value, ...rest }, ref) => {
-  const radio = useRadioState()
-  return (
+export const InputRadio = forwardRef(
+  ({ name, order, radio, setIsCheckboxChecked, value, ...rest }, ref) => (
+    // setIsCheckboxChecked is here to remove it from the DOM element
     <S.InputRadio
       id={value}
       name={name}
@@ -17,7 +16,7 @@ export const InputRadio = forwardRef(({ name, order, value, ...rest }, ref) => {
       {...radio}
     />
   )
-})
+)
 
 InputRadio.type = 'InputRadio'
 InputRadio.displayName = 'InputRadio'
@@ -33,6 +32,8 @@ InputRadio.propTypes = {
   onFocus: func,
   onKeyDown: func,
   order: number,
+  radio: object,
+  setIsCheckboxChecked: func,
   type: string,
   value: string
 }

src/components/RadioGroup/index.js

@@ -1,18 +1,25 @@
 import React, { cloneElement } from 'react'
 import { bool, node, string } from 'prop-types'
+import { RadioGroup as ReakitRadioGroup, useRadioState } from 'reakit/Radio'
 
 import { DIRECTIONS_TYPE } from '../../utils'
 import { FieldGroup } from '../FieldGroup'
 
 import * as S from './styles'
 
-export const RadioGroup = ({ children, flexDirection, label, required }) => (
-  <FieldGroup label={label} required={required}>
-    <S.Radios flexDirection={flexDirection}>
-      {children.map(child => cloneElement(child, { key: child.props.value, flexDirection }))}
-    </S.Radios>
-  </FieldGroup>
-)
+export const RadioGroup = ({ children, flexDirection, label, required }) => {
+  const radio = useRadioState()
+
+  return (
+    <FieldGroup as={ReakitRadioGroup} label={label} required={required}>
+      <S.Radios flexDirection={flexDirection}>
+        {children.map(child =>
+          cloneElement(child, { key: child.props.value, flexDirection, radio: { ...radio } })
+        )}
+      </S.Radios>
+    </FieldGroup>
+  )
+}
 
 RadioGroup.propTypes = {
   children: node,