feat(forms): allow booleans as select option values

Author: assisrafael

demo/FormExamples.jsx

@@ -188,6 +188,17 @@ export function FormExamples() {
             required
           />
         </div>
+        <div className="col-4">
+          <FormGroupSelect
+            name="selectBooleanField"
+            label="Select boolean"
+            options={[
+              { label: 'Yes', value: true },
+              { label: 'No', value: false },
+            ]}
+            required
+          />
+        </div>
         <div className="col-4">
           <FormGroupSelect
             name="selectField3"

demo/demo.jsx

@@ -17,7 +17,7 @@ ReactDOM.render(
       <StatefulTabs
         vertical={true}
         onlyRenderActiveTab={true}
-        initialTab={7}
+        initialTab={2}
         tabs={[
           {
             title: 'Dialog',

src/forms/helpers/form-helpers.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { getValueByPath } from '../../utils/getters-setters';
-import { isFunction } from '../../utils/types';
+import { isFunction, isUndefined } from '../../utils/types';
 
 export const FormContext = React.createContext(null);
 
@@ -45,8 +45,8 @@ export function normalizeOptions(options, formData, extraData) {
   }
 
   return _options.map((option) => ({
-    value: option.value || option,
-    label: option.label || serializeValue(option),
+    value: isUndefined(option.value) ? option : option.value,
+    label: isUndefined(option.label) ? serializeValue(option) : option.label,
   }));
 }
 

src/forms/helpers/useFormControl.js

@@ -23,6 +23,7 @@ export function useFormControl(name, type) {
     setValue,
     handleOnChange: ({ target }, _type) => {
       const value = getTargetValue(target);
+
       const decodedValue = decode(value, type || _type);
 
       setValue(decodedValue);
@@ -68,6 +69,10 @@ function decode(value, type) {
     return parseFloat(value);
   }
 
+  if (type === 'boolean') {
+    return value === 'true';
+  }
+
   return value;
 }