fix: Make sure the actual value is set in radio groups

Fixes the React Vanilla and React Material radio groups to set the
value handed over via the options instead of retrieving it from the
change handler. Thereby we avoid setting stringified conversions of the
values.

Author: TheZoker

README.md

@@ -51,8 +51,8 @@ In this case, you can try to clean the repository with `git clean -dfx`. Beware
 - Build (all packages): `pnpm run build`
 - Test (all packages): `pnpm run test`
 - Clean (delete `dist` folder of all packages): `pnpm run clean`
-- Run React Vanilla examples: `cd packages/vanilla && pnpm run dev`
-- Run React Material examples: `cd packages/material && pnpm run dev`
+- Run React Vanilla examples: `cd packages/vanilla-renderers && pnpm run dev`
+- Run React Material examples: `cd packages/material-renderers && pnpm run dev`
 - Run Angular Material examples: `cd packages/angular-material && pnpm run dev`
 - Run Vue Vanilla dev setup: `cd packages/vue-vanilla && pnpm run serve`
 

packages/material-renderers/src/controls/MaterialRadioGroup.tsx

@@ -65,7 +65,6 @@ export const MaterialRadioGroup = (props: ControlProps & OwnPropsOfEnum) => {
     focused,
     appliedUiSchemaOptions.showUnfocusedDescription
   );
-  const onChange = (_ev: any, value: any) => handleChange(path, value);
 
   return (
     <Hidden xsUp={!visible}>
@@ -87,12 +86,17 @@ export const MaterialRadioGroup = (props: ControlProps & OwnPropsOfEnum) => {
           {label}
         </FormLabel>
 
-        <RadioGroup value={props.data ?? ''} onChange={onChange} row={true}>
+        <RadioGroup value={props.data ?? ''} row={true}>
           {options.map((option) => (
             <FormControlLabel
               value={option.value}
               key={option.label}
-              control={<Radio checked={data === option.value} />}
+              control={
+                <Radio
+                  checked={data === option.value}
+                  onChange={() => handleChange(path, option.value)}
+                />
+              }
               label={option.label}
               disabled={!enabled}
             />

packages/vanilla-renderers/example/index.ts renamed to packages/vanilla-renderers/example/index.tsx

@@ -10,7 +10,7 @@ import typescript from 'rollup-plugin-typescript2';
  * @type {import('rollup').RollupOptions}
  */
 const config = {
-  input: 'example/index.ts',
+  input: 'example/index.tsx',
   output: {
     file: 'example/dist/bundle.js',
     format: 'iife',

packages/vanilla-renderers/rollup.example.config.js

@@ -111,7 +111,7 @@ export const RadioGroup = ({
               id={option.value}
               name={id}
               checked={data === option.value}
-              onChange={(ev) => handleChange(path, ev.currentTarget.value)}
+              onChange={(_) => handleChange(path, option.value)}
               disabled={!enabled}
               className={radioInput}
             />

packages/vanilla-renderers/src/controls/RadioGroup.tsx

@@ -215,4 +215,43 @@ describe('Radio group control', () => {
     expect(currentlyChecked).toHaveLength(1);
     expect((currentlyChecked.getDOMNode() as HTMLInputElement).value).toBe('B');
   });
+
+  test('Radio group should preserve option type', () => {
+    const renderers = [
+      { tester: rankWith(10, isEnumControl), renderer: RadioGroupControl },
+    ];
+    const schema = {
+      type: 'object',
+      properties: {
+        amount: {
+          type: 'integer',
+          enum: [50, 100, 250, 500],
+        },
+      },
+    };
+    const uischema = {
+      type: 'Control',
+      scope: '#/properties/amount',
+      options: {
+        format: 'radio',
+      },
+    };
+    const core = initCore(schema, uischema, fixture.data);
+    wrapper = mount(
+      <JsonFormsStateProvider initState={{ core, renderers }}>
+        <RadioGroupControl schema={schema} uischema={uischema} />
+      </JsonFormsStateProvider>
+    );
+
+    // Simulate a click event to change the selection
+    const radioInput = wrapper.find('input[value=100]');
+    radioInput.simulate('change');
+
+    const currentlyChecked = wrapper.find('input[checked=true]');
+    expect(currentlyChecked).toHaveLength(1);
+
+    // Check the type of the selected radio element's value
+    const selectedValue = currentlyChecked.props().value;
+    expect(typeof selectedValue).toBe('number');
+  });
 });