feat(forms): allow objects as FormSelect value

Author: assisrafael

demo/FormExamples.jsx

@@ -14,7 +14,7 @@ import {
 export function FormExamples() {
   return (
     <Form
-      initialValues={{ textField: 'abc' }}
+      initialValues={{ textField: 'abc', selectField2: { e: 2, c: 'b' } }}
       onChange={console.info}
       onSubmit={(formData, reset) => {
         console.log('onSubmit', formData);
@@ -157,7 +157,7 @@ export function FormExamples() {
             options={[
               { label: 'A', value: 'a' },
               { label: 'B', value: 'b' },
-              { label: 'C', value: 'c' },
+              { label: 'C', value: 'd' },
             ]}
             required
           />
@@ -177,15 +177,14 @@ export function FormExamples() {
         <div className="col">
           <FormGroupSelect
             name="selectField4"
-            label="Select field 4 (function)"
-            options={(formData) =>
-              Object.entries(formData)
-                .filter(([key]) => key !== 'selectField4')
-                .map(([key, value]) => ({
-                  label: key,
-                  value,
-                }))
-            }
+            label="Select field 4 (objects with trackBy)"
+            options={[
+              { label: 'A', value: { c: 'a', e: 1 } },
+              { label: 'B', value: { c: 'b', e: 2 } },
+              { label: 'C', value: { c: 'd', e: 3 } },
+            ]}
+            trackBy="c"
+            required
           />
         </div>
       </div>

src/forms/FormSelect.jsx

@@ -2,22 +2,25 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { normalizeOptions } from './helpers/form-helpers';
 import { useFormControl } from './helpers/useFormControl';
+import { getValueByPath } from '../utils/getters-setters';
 
-export function FormSelect({ id, name, options, required, placeholder }) {
+export function FormSelect({ id, name, options, required, placeholder, trackBy }) {
   const { getFormData, getValue, handleOnChange, register } = useFormControl(name);
   const registerRef = useCallback(register, []);
+  const value = getValue();
+  const normalizedOptions = normalizeOptions(options, getFormData());
 
   return (
     <select
       {...{ required, name, id }}
       className="custom-select"
       onChange={handleOnChange}
-      value={getValue()}
+      value={getSelectedOption(value, normalizedOptions, trackBy)}
       ref={registerRef}
     >
       <option value="">{placeholder}</option>
 
-      {renderOptions(options, getFormData())}
+      {renderOptions(normalizedOptions, trackBy)}
     </select>
   );
 }
@@ -31,12 +34,37 @@ FormSelect.propTypes = {
   ]),
   placeholder: PropTypes.string,
   required: PropTypes.any,
+  trackBy: PropTypes.string,
 };
 
-function renderOptions(options, formData) {
-  return normalizeOptions(options, formData).map(({ value, label }, index) => (
-    <option key={index} value={value}>
+function renderOptions(options, trackBy) {
+  return options.map(({ value, label }, index) => (
+    <option key={index} name={trackBy} value={serializeValue(value)}>
       {label}
     </option>
   ));
 }
+
+function getSelectedOption(value, options, trackBy) {
+  let selectedValue = value;
+
+  if (trackBy) {
+    const selectedOption = options.find(
+      (option) => getValueByPath(option.value, trackBy) === getValueByPath(value, trackBy)
+    );
+
+    if (selectedOption) {
+      selectedValue = selectedOption.value;
+    }
+  }
+
+  return serializeValue(selectedValue);
+}
+
+function serializeValue(value) {
+  if (typeof value !== 'object') {
+    return value;
+  }
+
+  return JSON.stringify(value);
+}

src/forms/helpers/useFormControl.js

@@ -12,7 +12,18 @@ export function useFormControl(name, type) {
     getValue: () => formState.getValue(name) || getEmptyValue(type),
     setValue,
     handleOnChange: ({ target }) => {
-      const value = target.type === 'checkbox' ? target.checked : target.value;
+      let value = target.type === 'checkbox' ? target.checked : target.value;
+
+      if (target.type === 'select-one') {
+        if (value && ['{', '['].includes(value[0])) {
+          try {
+            value = JSON.parse(value);
+          } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error(error);
+          }
+        }
+      }
 
       setValue(value);
     },