Add locking way to show value in ShortText

2 files changed, 13 insertions, 3 deletions

diff --git a/src/components/InputTypes/ShortText.tsx b/src/components/InputTypes/ShortText.tsx
index 8d99dc6..e40612f 100644
--- a/src/components/InputTypes/ShortText.tsx
+++ b/src/components/InputTypes/ShortText.tsx
@@ -1,20 +1,30 @@
 /** @jsx jsx */
 import { jsx } from "@emotion/react";
 import React, { ChangeEvent } from "react";
+import { useSelector } from "react-redux";
+
 import { textInputs, invalidStyles } from "../../commonStyles";
+import { Question } from "../../api/question";
+import { FormState } from "../../store/form/types";
 
 interface ShortTextProps {
     handler: (event: ChangeEvent<HTMLInputElement>) => void,
     onBlurHandler: () => void,
     valid: boolean,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    focus_ref: React.RefObject<any>
+    focus_ref: React.RefObject<any>,
+    question: Question
 }
 
 export default function ShortText(props: ShortTextProps): JSX.Element {
+    const values = useSelector<FormState, FormState["values"]>(
+        state => state.values
+    );
+    const value = values.get(props.question.id);
+
     return (
         <div css={invalidStyles}>
-            <input type="text" css={textInputs} placeholder="Enter Text..." onChange={props.handler} onBlur={props.onBlurHandler} className={!props.valid ? "invalid-box" : ""} ref={props.focus_ref}/>
+            <input type="text" value={typeof value === "string" ? value : ""} css={textInputs} placeholder="Enter Text..." onChange={props.handler} onBlur={props.onBlurHandler} className={!props.valid ? "invalid-box" : ""} ref={props.focus_ref}/>
         </div>
     );
 }
diff --git a/src/components/InputTypes/index.tsx b/src/components/InputTypes/index.tsx
index e816c9c..fd99ce8 100644
--- a/src/components/InputTypes/index.tsx
+++ b/src/components/InputTypes/index.tsx
@@ -56,7 +56,7 @@ export default function create_input(props: QuestionProp & QuestionStateProp & Q
             break;
 
         case QuestionType.ShortText:
-            result = <ShortText handler={handler} onBlurHandler={onBlurHandler} valid={valid} focus_ref={focus_ref}/>;
+            result = <ShortText handler={handler} onBlurHandler={onBlurHandler} valid={valid} focus_ref={focus_ref} question={question}/>;
             break;
 
         case QuestionType.Range: