Merge pull request KelvinTegelaar#2428 from JohnDuprey/dev

Fix form click issues
JohnDuprey · May 9, 2024 · 1fc0b8b · 1fc0b8b
2 parents 5891171 + c5ecb6f
commit 1fc0b8b
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 2 deletions.
diff --git a/src/components/forms/RFFComponents.jsx b/src/components/forms/RFFComponents.jsx
@@ -123,7 +123,9 @@ export const RFFCFormSwitch = ({
         >
           <div className={className}>
             <CFormSwitch
-              {...input}
+              onChange={input.onChange}
+              checked={input.checked}
+              value={input.value}
               // @todo revisit this, only shows green when checked
               valid={!meta.error && meta.touched && validate}
               invalid={meta.error && meta.touched && validate}
@@ -265,7 +267,9 @@ export const RFFCFormRadio = ({
       {({ meta, input }) => (
         <div className={className}>
           <CFormCheck
-            {...input}
+            onChange={input.onChange}
+            checked={input.checked}
+            value={input.value}
             valid={!meta.error && meta.touched}
             invalid={meta.error && meta.touched}
             disabled={disabled}
@@ -285,6 +289,49 @@ RFFCFormRadio.propTypes = {
   ...sharedPropTypes,
 }
 
+export const RFFCFormRadioList = ({
+  name,
+  options,
+  className = 'mb-3',
+  disabled = false,
+  onClick,
+  inline = false,
+}) => {
+  return (
+    <>
+      <div className={className}>
+        {options?.map((option, key) => {
+          return (
+            <Field name={name} type="radio" value={option.value} key={key}>
+              {({ input }) => {
+                return (
+                  <>
+                    <CFormCheck
+                      name={input.name}
+                      checked={input.checked}
+                      onChange={input.onChange}
+                      type="radio"
+                      {...option}
+                      disabled={disabled}
+                      onClick={onClick}
+                      inline={inline}
+                    />
+                  </>
+                )
+              }}
+            </Field>
+          )
+        })}
+      </div>
+    </>
+  )
+}
+
+RFFCFormRadioList.propTypes = {
+  ...sharedPropTypes,
+  inline: PropTypes.bool,
+}
+
 export const RFFCFormTextarea = ({
   name,
   label,

diff --git a/src/components/forms/index.js b/src/components/forms/index.js
@@ -5,6 +5,7 @@ import {
   RFFCFormSwitch,
   RFFCFormInput,
   RFFCFormRadio,
+  RFFCFormRadioList,
   RFFCFormTextarea,
   RFFCFormSelect,
   RFFSelectSearch,
@@ -18,6 +19,7 @@ export {
   RFFCFormSwitch,
   RFFCFormInput,
   RFFCFormRadio,
+  RFFCFormRadioList,
   RFFCFormTextarea,
   RFFCFormSelect,
   RFFSelectSearch,