Merge pull request #13 from sebgroup/bug/radiogroup-fixes

Bug/radiogroup fixes
seb-oss · May 9, 2019 · 6640f4c · 6640f4c
2 parents 95ef5f1 + 51a3ba0
commit 6640f4c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 19 deletions.
diff --git a/src/RadioGroup/RadioGroup.tsx b/src/RadioGroup/RadioGroup.tsx
@@ -31,25 +31,26 @@ export const RadioGroup: React.FunctionComponent<RadioGroupProps> = (props: Radi
             <div className={inputFieldClass}>
                 {props.label && <label className="radio-group-label" htmlFor={props.name}>{props.label}</label>}
 
-                {props.list && props.list.map((item, index) =>
-                    <div key={index} className="radio-item">
-
-                        <label className="radio-label" htmlFor={item.label}>{item.label}</label>
-                        <input
-                            className="radio-input"
-                            type="radio"
-                            value={item.value}
-                            name={item.group}
-                            id={item.label}
-                            checked={props.value === item.value}
-                            disabled={props.disableAll || item.disabled}
-                            onChange={(e) => { props.onChange(item.value); }}
-                        />
-
-                        <span className="checkmark" />
-                        {item.description && <span className="radio-description">{item.description}</span>}
-                    </div>
-                )}
+                {props.list && props.list.map((item, index) => {
+                    const identifier: string = item.label.replace(" ", "_") + Math.floor(Math.random() * 100) + (new Date()).getTime();
+                    return (
+                        <div key={index} className="radio-item">
+                            <label className="radio-label" htmlFor={identifier}>{item.label}</label>
+                            <input
+                                className="radio-input"
+                                type="radio"
+                                value={item.value}
+                                name={item.group}
+                                id={identifier}
+                                checked={props.value === item.value}
+                                disabled={props.disableAll || item.disabled}
+                                onChange={(e) => { props.onChange(item.value); }}
+                            />
+                            <span className="checkmark" />
+                            {item.description && <span className="radio-description">{item.description}</span>}
+                        </div>
+                    );
+                })}
                 {props.error && <div className={"alert alert-danger"}>{props.error}</div>}
             </div>
         </div>

diff --git a/src/RadioGroup/radio-group-style.scss b/src/RadioGroup/radio-group-style.scss
@@ -15,6 +15,7 @@ $red: #F03529;
         user-select: none;
         transition: all $transition-time;
         .radio-item {
+            vertical-align: top;
             position: relative;
             margin-bottom: 5px;
             input[type=radio] {