Support integer values in select element

Author: js-ta

src/tests/createHeadlessForm.test.js

@@ -63,6 +63,7 @@ import {
   schemaForErrorMessageSpecificity,
   jsfConfigForErrorMessageSpecificity,
   schemaInputTypeFile,
+  schemaWithSelectInteger,
 } from './helpers';
 import { mockConsole, restoreConsoleAndEnsureItWasNotCalled } from './testUtils';
 import { createHeadlessForm } from '@/createHeadlessForm';
@@ -657,6 +658,27 @@ describe('createHeadlessForm', () => {
           ],
         });
       });
+
+      it('supports "select" field with integer values', async () => {
+        const { handleValidation } = createHeadlessForm(schemaWithSelectInteger);
+        const validateForm = (vals) => friendlyError(handleValidation(vals));
+
+        // Check for invalid option
+        expect(
+          validateForm({
+            account_type: 4,
+          })
+        ).toEqual({
+          account_type: 'The option 4 is not valid.',
+        });
+
+        // Check for valid option
+        expect(
+          validateForm({
+            account_type: 1,
+          })
+        ).toBeUndefined();
+      });
     });
     describe('support "radio" field type', () => {
       it('support "radio" field type @deprecated', () => {

src/tests/helpers.js

@@ -2327,3 +2327,24 @@ export const schemaWithCustomValidationsAndConditionals = {
     },
   ],
 };
+
+export const schemaWithSelectInteger = {
+  additionalProperties: false,
+  type: 'object',
+  properties: {
+    account_type: {
+      title: 'Select an account type',
+      description: '',
+      'x-jsf-presentation': {
+        inputType: 'select',
+      },
+      oneOf: [
+        { title: 'Normal User', const: 0 },
+        { title: 'Business', const: 1 },
+        { title: 'Services Provider', const: 2 },
+      ],
+      type: 'integer',
+    },
+  },
+  required: [],
+};

src/yupSchema.js

@@ -273,6 +273,8 @@ const getYupSchema = ({ inputType, ...field }) => {
     switch (type) {
       case 'number':
         return yupSchemas.radioOrSelectNumber(optionValues);
+      case 'integer':
+        return yupSchemas.radioOrSelectNumber(optionValues);
       case 'boolean':
         return yupSchemas.radioOrSelectBoolean(optionValues);
       default:
@@ -513,7 +515,8 @@ export function buildYupSchema(field, config, logic) {
     validators.push(withFile);
   }
 
-  if (jsonType === 'integer') {
+  const hasOptions = field.options?.length > 0;
+  if (jsonType === 'integer' && !hasOptions) {
     validators.push(withInteger);
   }