FIO-10006: Radio values not displayed with render mode html

src/components/radio/Radio.js

@@ -179,14 +179,21 @@ export default class RadioComponent extends ListComponent {
     });
   }
 
+  convertValues(values) {
+    if (this.options.renderMode === 'html' && this.type === 'radio') {
+      return values.map(x => ({ ...x, value: this.convertByDataType(x.value) }))
+    }
+    return values
+  }
+
   render() {
     if (!this.optionsLoaded) {
       return super.render(this.renderTemplate('loader'));
     }
     return super.render(this.renderTemplate('radio', {
       input: this.inputInfo,
       inline: this.component.inline,
-      values: this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions,
+      values: this.component.dataSrc === 'values' ? this.convertValues(this.component.values) : this.loadedOptions,
       value: this.dataValue,
       row: this.row,
     }));
@@ -472,15 +479,14 @@ export default class RadioComponent extends ListComponent {
    * @param {*} value - The value to normalize
    * @returns {*} - Returns the normalized value
    */
-  normalizeValue(value) {
+  convertByDataType(value) {
     const dataType = this.component.dataType || 'auto';
     if (value === this.emptyValue) {
       return value;
     }
 
     switch (dataType) {
       case 'auto':
-
         if (!isNaN(parseFloat(value)) && isFinite(value) && _.toString(value) === Number(value).toString()) {
           value = +value;
         }
@@ -507,15 +513,21 @@ export default class RadioComponent extends ListComponent {
         break;
       }
 
-    if (this.isSelectURL && this.templateData && this.templateData[value]) {
+      return value;
+  }
+
+  normalizeValue(value) {
+    const valueConverted = this.convertByDataType(value)
+
+    if (this.isSelectURL && this.templateData && this.templateData[valueConverted]) {
       const submission = this.root.submission;
       if (!submission.metadata.selectData) {
         submission.metadata.selectData = {};
       }
 
-      _.set(submission.metadata.selectData, this.path, this.templateData[value]);
+      _.set(submission.metadata.selectData, this.path, this.templateData[valueConverted]);
     }
 
-    return super.normalizeValue(value);
+    return super.normalizeValue(valueConverted);
   }
 }

test/unit/Radio.unit.js

@@ -16,9 +16,11 @@ import {
   comp9,
   comp10,
   comp11,
-  comp13
+  comp13,
+  comp14
 } from './fixtures/radio';
 import { fastCloneDeep } from '@formio/core';
+import { wait } from '../util';
 
 describe('Radio Component', () => {
   it('Should build a radio component', () => {
@@ -607,4 +609,22 @@ describe('Radio Component', () => {
       })
       .catch(done);
   });
+
+  it("Should display result for radio submission with form='html' and dataType='number'", async function () {
+    const element = document.createElement('div');
+    const form = await Formio.createForm(
+      element,
+      comp14,
+      {
+        readOnly: true,
+        renderMode: 'html'
+      }
+    );
+    const el = form.element.querySelector('[ref="value"]');
+    assert.equal(el.innerHTML.trim(), '');
+    await form.setSubmission({ data: { radio: 2, submit: true } });
+    await wait(200);
+    const elNext = form.element.querySelector('[ref="value"]');
+    assert.equal(elNext.innerHTML.trim(), 'B');
+  });
 });

test/unit/fixtures/radio/comp14.js

@@ -0,0 +1,36 @@
+export default {
+  type: "form",
+  name: "selectr",
+  path: "selectr",
+  components: [
+    {
+      label: "Radio",
+      optionsLabelPosition: "right",
+      inline: false,
+      tableView: false,
+      defaultValue: true,
+      values: [
+        {
+          label: "A",
+          value: "1",
+          shortcut: ""
+        },
+        {
+          label: "B",
+          value: "2",
+          shortcut: ""
+        },
+        {
+          label: "C",
+          value: "3",
+          shortcut: ""
+        },
+      ],
+      dataType: "number",
+      validateWhenHidden: false,
+      key: "radio",
+      type: "radio",
+      input: true
+    },
+  ]
+}

test/unit/fixtures/radio/index.js

@@ -11,4 +11,5 @@ import comp10 from './comp10';
 import comp11 from './comp11';
 import comp12 from './comp12';
 import comp13 from './comp13';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13 };
+import comp14 from './comp14';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14};