Merge pull request #730 from open-formulieren/backport/2.4.x-select-d…

…atatype

[Backport 2.4.x] 🐛 [open-formulieren/open-forms#4772] Fix select component with integer values

src/formio/components/Select.js

@@ -7,6 +7,14 @@ import {applyPrefix} from '../utils';
  * Extend the default select field to modify it to our needs.
  */
 class Select extends Formio.Components.components.select {
+  constructor(component, options, data) {
+    super(component, options, data);
+    // Fix for https://github.com/open-formulieren/open-forms/issues/4772
+    // ensure the datatype is always set to string to avoid formio casting it to other
+    // types (such as integer)
+    component.dataType = 'string';
+  }
+
   get inputInfo() {
     const info = super.inputInfo;
     // change the default CSS classes

src/jstests/formio/components/select.spec.js

@@ -0,0 +1,64 @@
+import _ from 'lodash';
+import {Formio} from 'react-formio';
+
+import {BASE_URL} from 'api-mocks';
+import OpenFormsModule from 'formio/module';
+
+// Use our custom components
+Formio.use(OpenFormsModule);
+
+const selectForm = {
+  type: 'form',
+  components: [
+    {
+      type: 'select',
+      key: 'selectWithInt',
+      label: 'Select with integer values',
+      data: {
+        values: [
+          {
+            label: 'Optie 1',
+            value: '1',
+          },
+          {
+            label: 'Optie 2',
+            value: '2',
+          },
+        ],
+      },
+      validate: {
+        required: true,
+      },
+    },
+  ],
+  title: 'Test Select form',
+  display: 'Test Select form',
+  name: 'testSelectForm',
+  path: 'testSelectForm',
+};
+
+describe('Select Component', () => {
+  test('Values are always strings', done => {
+    let formJSON = _.cloneDeep(selectForm);
+
+    const element = document.createElement('div');
+
+    Formio.createForm(element, formJSON, {baseUrl: BASE_URL})
+      .then(form => {
+        form.setPristine(false);
+        const select = form.getComponent('selectWithInt');
+
+        select.setValue('1');
+
+        form
+          .submit()
+          .then(submission => {
+            // Verify that the value of the select component in the submission data is as expected
+            expect(submission.data.selectWithInt).toEqual('1');
+            done();
+          })
+          .catch(done);
+      })
+      .catch(done);
+  });
+});