Use options.value instead of ev.currentTarget.value for value handling within vanilla-renderers

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/rollup.example.config.js

@@ -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/src/controls/RadioGroup.tsx

@@ -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/test/renderers/RadioGroupControl.test.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');
+  });
 });