Skip to content

Commit 1125f7e

Browse files
rvsiarvsia
authored
Merge pull request #415 from data-driven-forms/fix-pf4-radio
fix(pf4): fixed radio having bool value instead of input value.
2 parents 8b0cd66 + 4c16ff8 commit 1125f7e

2 files changed

Lines changed: 35 additions & 18 deletions

File tree

‎packages/pf4-component-mapper/src/files/radio.js‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,17 @@ import { useFieldApi } from '@data-driven-forms/react-form-renderer';
44
import { Radio as Pf4Radio } from '@patternfly/react-core';
55
import FormGroup from '../common/form-group';
66

7-
const RadioOption = ({ name, option, isDisabled, isReadOnly }) => {
8-
const { input } = useFieldApi({ name, type: 'radio', value: option.value });
7+
const RadioOption = ({ name, option, isDisabled, isReadOnly, radioGroupValue }) => {
8+
const {
9+
input: { checked, ...input }
10+
} = useFieldApi({ name, value: option.value });
911
return (
1012
<Pf4Radio
1113
key={`${name}-${option.value}`}
1214
{...input}
15+
isChecked={radioGroupValue === option.value}
16+
value={option.value}
17+
onChange={() => input.onChange(option.value)}
1318
label={option.label}
1419
id={`${name}-${option.value}`}
1520
aria-label={option.label}
@@ -22,10 +27,15 @@ RadioOption.propTypes = {
2227
name: PropTypes.string.isRequired,
2328
option: PropTypes.shape({ label: PropTypes.node.isRequired, value: PropTypes.any.isRequired }).isRequired,
2429
isDisabled: PropTypes.bool,
25-
isReadOnly: PropTypes.bool
30+
isReadOnly: PropTypes.bool,
31+
radioGroupValue: PropTypes.any
2632
};
2733

28-
const Radio = ({ name, options, ...props }) => {
34+
const Radio = ({ name, options, type, ...props }) => {
35+
/**
36+
* You cannot assign type radio to PF4 radio buttons input. It will break and will not set input value, only checked property
37+
* It has to be reqular input and we have change the radio value manully to the option value
38+
*/
2939
const { label, isRequired, helperText, meta, description, hideLabel, input, isReadOnly, isDisabled, id } = useFieldApi({
3040
name,
3141
...props
@@ -41,7 +51,7 @@ const Radio = ({ name, options, ...props }) => {
4151
id={id || input.name}
4252
>
4353
{options.map((option) => (
44-
<RadioOption key={option.value} name={name} option={option} isReadOnly={isReadOnly} isDisabled={isDisabled} />
54+
<RadioOption radioGroupValue={input.value} key={option.value} name={name} option={option} isReadOnly={isReadOnly} isDisabled={isDisabled} />
4555
))}
4656
</FormGroup>
4757
);
@@ -57,7 +67,8 @@ Radio.propTypes = {
5767
isDisabled: PropTypes.bool,
5868
id: PropTypes.string,
5969
name: PropTypes.string.isRequired,
60-
options: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.any })).isRequired
70+
options: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.any })).isRequired,
71+
type: PropTypes.any
6172
};
6273

6374
export default Radio;

‎packages/pf4-component-mapper/src/tests/__snapshots__/form-fields.test.js.snap‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -869,12 +869,13 @@ exports[`FormFields should render Radio correctly 1`] = `
869869
"value": "1",
870870
}
871871
}
872+
radioGroupValue=""
872873
>
873874
<Radio
874875
aria-label="One"
875-
checked={false}
876876
className=""
877877
id="Name of the field-1"
878+
isChecked={false}
878879
isDisabled={false}
879880
isValid={true}
880881
key="Name of the field-1"
@@ -883,14 +884,14 @@ exports[`FormFields should render Radio correctly 1`] = `
883884
onBlur={[Function]}
884885
onChange={[Function]}
885886
onFocus={[Function]}
886-
type="radio"
887887
value="1"
888888
>
889889
<div
890890
className="pf-c-radio"
891891
>
892892
<input
893893
aria-invalid={false}
894+
checked={false}
894895
className="pf-c-radio__input"
895896
disabled={false}
896897
id="Name of the field-1"
@@ -919,12 +920,13 @@ exports[`FormFields should render Radio correctly 1`] = `
919920
"value": "2",
920921
}
921922
}
923+
radioGroupValue=""
922924
>
923925
<Radio
924926
aria-label="Two"
925-
checked={false}
926927
className=""
927928
id="Name of the field-2"
929+
isChecked={false}
928930
isDisabled={false}
929931
isValid={true}
930932
key="Name of the field-2"
@@ -933,14 +935,14 @@ exports[`FormFields should render Radio correctly 1`] = `
933935
onBlur={[Function]}
934936
onChange={[Function]}
935937
onFocus={[Function]}
936-
type="radio"
937938
value="2"
938939
>
939940
<div
940941
className="pf-c-radio"
941942
>
942943
<input
943944
aria-invalid={false}
945+
checked={false}
944946
className="pf-c-radio__input"
945947
disabled={false}
946948
id="Name of the field-2"
@@ -969,12 +971,13 @@ exports[`FormFields should render Radio correctly 1`] = `
969971
"value": "3",
970972
}
971973
}
974+
radioGroupValue=""
972975
>
973976
<Radio
974977
aria-label="Three"
975-
checked={false}
976978
className=""
977979
id="Name of the field-3"
980+
isChecked={false}
978981
isDisabled={false}
979982
isValid={true}
980983
key="Name of the field-3"
@@ -983,14 +986,14 @@ exports[`FormFields should render Radio correctly 1`] = `
983986
onBlur={[Function]}
984987
onChange={[Function]}
985988
onFocus={[Function]}
986-
type="radio"
987989
value="3"
988990
>
989991
<div
990992
className="pf-c-radio"
991993
>
992994
<input
993995
aria-invalid={false}
996+
checked={false}
994997
className="pf-c-radio__input"
995998
disabled={false}
996999
id="Name of the field-3"
@@ -2403,12 +2406,13 @@ exports[`FormFields should render disabled Radio correctly 1`] = `
24032406
"value": "1",
24042407
}
24052408
}
2409+
radioGroupValue=""
24062410
>
24072411
<Radio
24082412
aria-label="One"
2409-
checked={false}
24102413
className=""
24112414
id="Name of the field-1"
2415+
isChecked={false}
24122416
isDisabled={false}
24132417
isValid={true}
24142418
key="Name of the field-1"
@@ -2417,14 +2421,14 @@ exports[`FormFields should render disabled Radio correctly 1`] = `
24172421
onBlur={[Function]}
24182422
onChange={[Function]}
24192423
onFocus={[Function]}
2420-
type="radio"
24212424
value="1"
24222425
>
24232426
<div
24242427
className="pf-c-radio"
24252428
>
24262429
<input
24272430
aria-invalid={false}
2431+
checked={false}
24282432
className="pf-c-radio__input"
24292433
disabled={false}
24302434
id="Name of the field-1"
@@ -2453,12 +2457,13 @@ exports[`FormFields should render disabled Radio correctly 1`] = `
24532457
"value": "2",
24542458
}
24552459
}
2460+
radioGroupValue=""
24562461
>
24572462
<Radio
24582463
aria-label="Two"
2459-
checked={false}
24602464
className=""
24612465
id="Name of the field-2"
2466+
isChecked={false}
24622467
isDisabled={false}
24632468
isValid={true}
24642469
key="Name of the field-2"
@@ -2467,14 +2472,14 @@ exports[`FormFields should render disabled Radio correctly 1`] = `
24672472
onBlur={[Function]}
24682473
onChange={[Function]}
24692474
onFocus={[Function]}
2470-
type="radio"
24712475
value="2"
24722476
>
24732477
<div
24742478
className="pf-c-radio"
24752479
>
24762480
<input
24772481
aria-invalid={false}
2482+
checked={false}
24782483
className="pf-c-radio__input"
24792484
disabled={false}
24802485
id="Name of the field-2"
@@ -2503,12 +2508,13 @@ exports[`FormFields should render disabled Radio correctly 1`] = `
25032508
"value": "3",
25042509
}
25052510
}
2511+
radioGroupValue=""
25062512
>
25072513
<Radio
25082514
aria-label="Three"
2509-
checked={false}
25102515
className=""
25112516
id="Name of the field-3"
2517+
isChecked={false}
25122518
isDisabled={false}
25132519
isValid={true}
25142520
key="Name of the field-3"
@@ -2517,14 +2523,14 @@ exports[`FormFields should render disabled Radio correctly 1`] = `
25172523
onBlur={[Function]}
25182524
onChange={[Function]}
25192525
onFocus={[Function]}
2520-
type="radio"
25212526
value="3"
25222527
>
25232528
<div
25242529
className="pf-c-radio"
25252530
>
25262531
<input
25272532
aria-invalid={false}
2533+
checked={false}
25282534
className="pf-c-radio__input"
25292535
disabled={false}
25302536
id="Name of the field-3"

0 commit comments

Comments
 (0)