fix(forms): allow numbers as option value on select inputs

Author: assisrafael

demo/FormExamples.jsx

@@ -170,10 +170,13 @@ export function FormExamples() {
       </div>
 
       <div className="row">
-        <div className="col">
+        <div className="col-4">
           <FormGroupSelect name="selectField" label="Select field (list)" options={['A', 'B', 'C']} disabled />
         </div>
-        <div className="col">
+        <div className="col-4">
+          <FormGroupSelect name="selectNumberField" label="Select field (number list)" options={[1, 2, 3, 4]} />
+        </div>
+        <div className="col-4">
           <FormGroupSelect
             name="selectField2"
             label="Select field 2 (array of objects)"
@@ -185,7 +188,7 @@ export function FormExamples() {
             required
           />
         </div>
-        <div className="col">
+        <div className="col-4">
           <FormGroupSelect
             name="selectField3"
             label="Select field 3 (function)"
@@ -197,7 +200,7 @@ export function FormExamples() {
             placeholder="Select one value"
           />
         </div>
-        <div className="col">
+        <div className="col-4">
           <FormGroupSelect
             name="selectField4"
             label="Select field 4 (objects with trackBy)"

src/forms/FormGroup.jsx

@@ -151,6 +151,7 @@ FormGroupSelect.propTypes = {
     PropTypes.arrayOf(
       PropTypes.oneOfType([
         PropTypes.string,
+        PropTypes.number,
         PropTypes.shape({
           value: PropTypes.any.isRequired,
           label: PropTypes.node.isRequired,

src/forms/FormSelect.jsx

@@ -1,8 +1,13 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 
-import { getValueByPath } from '../utils/getters-setters';
-import { normalizeOptions, booleanOrFunction } from './helpers/form-helpers';
+import {
+  normalizeOptions,
+  booleanOrFunction,
+  serializeValue,
+  getSelectedOption,
+  getOptionsType,
+} from './helpers/form-helpers';
 import { useFormControl } from './helpers/useFormControl';
 
 export function FormSelect({
@@ -32,7 +37,7 @@ export function FormSelect({
     <select
       {...attrs}
       className="custom-select"
-      onChange={handleOnChange}
+      onChange={(e) => handleOnChange(e, getOptionsType(normalizedOptions))}
       value={getSelectedOption(value, normalizedOptions, trackBy)}
       ref={registerRef}
     >
@@ -52,6 +57,7 @@ FormSelect.propTypes = {
     PropTypes.arrayOf(
       PropTypes.oneOfType([
         PropTypes.string,
+        PropTypes.number,
         PropTypes.shape({ value: PropTypes.any.isRequired, label: PropTypes.string.isRequired }),
       ])
     ),
@@ -68,27 +74,3 @@ function renderOptions(options, trackBy) {
     </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/form-helpers.js

@@ -44,16 +44,10 @@ export function normalizeOptions(options, formData, extraData) {
     throw new Error('Select Options should be an array');
   }
 
-  return _options.map((option) => {
-    if (typeof option !== 'string') {
-      return option;
-    }
-
-    return {
-      value: option,
-      label: option,
-    };
-  });
+  return _options.map((option) => ({
+    value: option.value || option,
+    label: option.label || serializeValue(option),
+  }));
 }
 
 export function booleanOrFunction(property, formData) {
@@ -63,3 +57,31 @@ export function booleanOrFunction(property, formData) {
 
   return property(formData);
 }
+
+export function serializeValue(value) {
+  if (typeof value !== 'object') {
+    return value.toString();
+  }
+
+  return JSON.stringify(value);
+}
+
+export 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);
+}
+
+export function getOptionsType(options) {
+  return options.length > 0 ? typeof options[0].value : undefined;
+}

src/forms/helpers/useFormControl.js

@@ -21,10 +21,11 @@ export function useFormControl(name, type) {
   return {
     getValue: () => encode(formState.getValue(name), type),
     setValue,
-    handleOnChange: ({ target }) => {
+    handleOnChange: ({ target }, _type) => {
       const value = getTargetValue(target);
+      const decodedValue = decode(value, type || _type);
 
-      setValue(value);
+      setValue(decodedValue);
     },
     register,
     getFormData: () => formState.getFormData(),
@@ -62,6 +63,14 @@ function encode(value, type) {
   return value;
 }
 
+function decode(value, type) {
+  if (type === 'number') {
+    return parseFloat(value);
+  }
+
+  return value;
+}
+
 function getTargetValue(target) {
   let value = target.type === 'checkbox' ? target.checked : target.value;