Add blur handler to Radio and Range

3 files changed, 8 insertions, 6 deletions

diff --git a/src/components/InputTypes/Radio.tsx b/src/components/InputTypes/Radio.tsx
index 3bf13ed..a857964 100644
--- a/src/components/InputTypes/Radio.tsx
+++ b/src/components/InputTypes/Radio.tsx
@@ -7,7 +7,8 @@ import { multiSelectInput, hiddenInput } from "../../commonStyles";
 interface RadioProps {
     option: string,
     question_id: string,
-    handler: (event: ChangeEvent<HTMLInputElement>) => void
+    handler: (event: ChangeEvent<HTMLInputElement>) => void,
+    onBlurHandler: () => void
 }
 
 const styles = css`
@@ -31,7 +32,7 @@ const styles = css`
 export default function Radio(props: RadioProps): JSX.Element {
     return (
         <label css={styles}>
-            <input type="radio" name={props.question_id} onChange={props.handler} css={hiddenInput}/>
+            <input type="radio" name={props.question_id} onChange={props.handler} css={hiddenInput} onBlur={props.onBlurHandler}/>
             <div css={multiSelectInput}/>
             {props.option}<br/>
         </label>
diff --git a/src/components/InputTypes/Range.tsx b/src/components/InputTypes/Range.tsx
index b41a960..23cb3f6 100644
--- a/src/components/InputTypes/Range.tsx
+++ b/src/components/InputTypes/Range.tsx
@@ -8,7 +8,8 @@ interface RangeProps {
     question_id: string,
     options: Array<string>,
     handler: (event: ChangeEvent<HTMLInputElement>) => void,
-    required: boolean
+    required: boolean,
+    onBlurHandler: () => void
 }
 
 const containerStyles = css`
@@ -100,7 +101,7 @@ export default function Range(props: RangeProps): JSX.Element {
         return (
             <label css={[selectorStyles, css`width: 1rem`]} key={index}>
                 <span css={optionStyles}>{option}</span>
-                <input type="radio" name={props.question_id} css={hiddenInput} onChange={props.handler}/>
+                <input type="radio" name={props.question_id} css={hiddenInput} onChange={props.handler} onBlur={props.onBlurHandler}/>
                 <div css={multiSelectInput}/>
             </label>
         );
diff --git a/src/components/InputTypes/index.tsx b/src/components/InputTypes/index.tsx
index 3d7444f..bc65248 100644
--- a/src/components/InputTypes/index.tsx
+++ b/src/components/InputTypes/index.tsx
@@ -47,7 +47,7 @@ export default function create_input({ question, public_state }: QuestionProp, h
             break;
 
         case QuestionType.Radio:
-            result = options.map((option, index) => <Radio option={option} question_id={question.id} handler={handler} key={index}/>);
+            result = options.map((option, index) => <Radio option={option} question_id={question.id} handler={handler} key={index} onBlurHandler={onBlurHandler}/>);
             break;
 
         case QuestionType.Select:
@@ -59,7 +59,7 @@ export default function create_input({ question, public_state }: QuestionProp, h
             break;
 
         case QuestionType.Range:
-            result = <Range question_id={question.id} options={options} handler={handler} required={question.required}/>;
+            result = <Range question_id={question.id} options={options} handler={handler} required={question.required} onBlurHandler={onBlurHandler}/>;
             break;
 
         case QuestionType.Code: