From a827d0e26037776eb5c2cb6bd4c5f0d6d90f88e0 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Sun, 17 Jan 2021 19:30:45 +0200
Subject: Add required props to form field types

---
 src/components/InputTypes/Range.tsx     |  3 ++-
 src/components/InputTypes/Select.tsx    |  3 ++-
 src/components/InputTypes/ShortText.tsx |  3 ++-
 src/components/InputTypes/TextArea.tsx  |  3 ++-
 src/components/InputTypes/index.tsx     | 10 +++++-----
 5 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/InputTypes/Range.tsx b/src/components/InputTypes/Range.tsx
index e2f89f4..b41a960 100644
--- a/src/components/InputTypes/Range.tsx
+++ b/src/components/InputTypes/Range.tsx
@@ -7,7 +7,8 @@ import { hiddenInput, multiSelectInput } from "../../commonStyles";
 interface RangeProps {
     question_id: string,
     options: Array<string>,
-    handler: (event: ChangeEvent<HTMLInputElement>) => void
+    handler: (event: ChangeEvent<HTMLInputElement>) => void,
+    required: boolean
 }
 
 const containerStyles = css`
diff --git a/src/components/InputTypes/Select.tsx b/src/components/InputTypes/Select.tsx
index e753357..4e66002 100644
--- a/src/components/InputTypes/Select.tsx
+++ b/src/components/InputTypes/Select.tsx
@@ -5,7 +5,8 @@ import { hiddenInput } from "../../commonStyles";
 
 interface SelectProps {
     options: Array<string>,
-    state_dict: Map<string, string | boolean | null>
+    state_dict: Map<string, string | boolean | null>,
+    required: boolean
 }
 
 const containerStyles = css`
diff --git a/src/components/InputTypes/ShortText.tsx b/src/components/InputTypes/ShortText.tsx
index 1e38bcd..d34bd01 100644
--- a/src/components/InputTypes/ShortText.tsx
+++ b/src/components/InputTypes/ShortText.tsx
@@ -4,7 +4,8 @@ import React, { ChangeEvent } from "react";
 import { textInputs } from "../../commonStyles";
 
 interface ShortTextProps {
-    handler: (event: ChangeEvent<HTMLInputElement>) => void
+    handler: (event: ChangeEvent<HTMLInputElement>) => void,
+    required: boolean
 }
 
 export default function ShortText(props: ShortTextProps): JSX.Element {
diff --git a/src/components/InputTypes/TextArea.tsx b/src/components/InputTypes/TextArea.tsx
index 6e46c27..40547bb 100644
--- a/src/components/InputTypes/TextArea.tsx
+++ b/src/components/InputTypes/TextArea.tsx
@@ -4,7 +4,8 @@ import React, { ChangeEvent } from "react";
 import { textInputs } from "../../commonStyles";
 
 interface TextAreaProps {
-    handler: (event: ChangeEvent<HTMLTextAreaElement>) => void
+    handler: (event: ChangeEvent<HTMLTextAreaElement>) => void,
+    required: boolean
 }
 
 const styles = css`
diff --git a/src/components/InputTypes/index.tsx b/src/components/InputTypes/index.tsx
index f1e0b30..a597c94 100644
--- a/src/components/InputTypes/index.tsx
+++ b/src/components/InputTypes/index.tsx
@@ -34,7 +34,7 @@ export default function create_input({ question, public_state }: QuestionProp, h
     /* eslint-disable react/react-in-jsx-scope */
     switch (question.type) {
         case QuestionType.TextArea:
-            result = <TextArea handler={handler}/>;
+            result = <TextArea handler={handler} required={question.required} />;
             break;
 
         case QuestionType.Checkbox:
@@ -46,15 +46,15 @@ export default function create_input({ question, public_state }: QuestionProp, h
             break;
 
         case QuestionType.Select:
-            result = <Select options={options} state_dict={public_state}/>;
+            result = <Select options={options} state_dict={public_state} required={question.required}/>;
             break;
 
         case QuestionType.ShortText:
-            result = <ShortText handler={handler}/>;
+            result = <ShortText handler={handler} required={question.required}/>;
             break;
 
         case QuestionType.Range:
-            result = <Range question_id={question.id} options={options} handler={handler}/>;
+            result = <Range question_id={question.id} options={options} handler={handler} required={question.required}/>;
             break;
 
         case QuestionType.Code:
@@ -63,7 +63,7 @@ export default function create_input({ question, public_state }: QuestionProp, h
             break;
 
         default:
-            result = <TextArea handler={handler}/>;
+            result = <TextArea handler={handler} required={question.required}/>;
     }
     /* eslint-enable react/react-in-jsx-scope */
 
-- 
cgit v1.2.3


From 1617faf75496193c21134fc3ccb59fd456d1575b Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 18 Jan 2021 11:29:05 +0200
Subject: Create new ErrorMessage component for showing field error messages

---
 src/components/ErrorMessage.tsx | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 src/components/ErrorMessage.tsx

diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
new file mode 100644
index 0000000..f807817
--- /dev/null
+++ b/src/components/ErrorMessage.tsx
@@ -0,0 +1,25 @@
+/** @jsx jsx */
+import { jsx, css } from "@emotion/react";
+import colors from "../colors";
+
+interface ErrorMessageProps {
+    show: boolean,
+    message: string
+}
+
+const styles = css`
+  color: ${colors.error};
+  font-size: 20px;
+  line-height: 15px;
+  margin: 10px 0 0;
+`;
+
+export default function ErrorMessage(props: ErrorMessageProps): JSX.Element|null {
+    if (!props.show) {
+        return null;
+    }
+
+    return (
+        <p css={styles}>{props.message}</p>
+    );
+}
-- 
cgit v1.2.3


From 9a8701a95b476d6c0ccfe814bc0c217e6b860903 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 18 Jan 2021 11:32:54 +0200
Subject: Add valid and error to public state and required check for textarea

---
 src/components/Question.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/Question.tsx b/src/components/Question.tsx
index 735d69b..7a8c85b 100644
--- a/src/components/Question.tsx
+++ b/src/components/Question.tsx
@@ -27,6 +27,8 @@ class RenderedQuestion extends React.Component<QuestionProp> {
         } else {
             this.handler = this.normal_handler.bind(this);
         }
+        this.setPublicState("valid", true);
+        this.setPublicState("error", "");
 
         if (!skip_normal_state.includes(props.question.type)) {
             this.setPublicState("value", "");
@@ -76,6 +78,13 @@ class RenderedQuestion extends React.Component<QuestionProp> {
     }
 
     text_area_handler(event: ChangeEvent<HTMLTextAreaElement>): void {
+        if (this.props.question.required && event.target.value === "") {
+            this.setPublicState("error", "Field must be filled.");
+            this.setPublicState("valid", false);
+        } else {
+            this.setPublicState("valid", true);
+        }
+
         this.setPublicState("value", event.target.value);
     }
 
-- 
cgit v1.2.3


From df4cac518827b69977cdb156394abb399ef64871 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 18 Jan 2021 11:35:00 +0200
Subject: Display invalid information for TextArea

---
 src/components/InputTypes/TextArea.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/InputTypes/TextArea.tsx b/src/components/InputTypes/TextArea.tsx
index 40547bb..a09ce8a 100644
--- a/src/components/InputTypes/TextArea.tsx
+++ b/src/components/InputTypes/TextArea.tsx
@@ -2,10 +2,14 @@
 import { jsx, css } from "@emotion/react";
 import React, { ChangeEvent } from "react";
 import { textInputs } from "../../commonStyles";
+import ErrorMessage from "../ErrorMessage";
+import colors from "../../colors";
 
 interface TextAreaProps {
     handler: (event: ChangeEvent<HTMLTextAreaElement>) => void,
-    required: boolean
+    required: boolean,
+    valid: boolean,
+    error: string
 }
 
 const styles = css`
@@ -17,6 +21,18 @@ const styles = css`
   padding: 1rem;
 `;
 
+const invalidStyles = css`
+  .invalid-box {
+    box-shadow: 0 0 10px ${colors.error};
+    border: none;
+  }
+`;
+
 export default function TextArea(props: TextAreaProps): JSX.Element {
-    return <textarea css={[textInputs, styles]} placeholder="Enter Text..." onChange={props.handler}/>;
+    return (
+        <div css={invalidStyles}>
+            <textarea css={[textInputs, styles]} placeholder="Enter Text..." onChange={props.handler} className={!props.valid ? "invalid-box" : ""} required={props.required}/>
+            <ErrorMessage show={!props.valid} message={props.error}/>
+        </div>
+    );
 }
-- 
cgit v1.2.3


From 5b9d94583f33795548d37fc890189167713c9a3f Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 18 Jan 2021 11:36:39 +0200
Subject: Provide valid and error message data to TextArea component

---
 src/components/InputTypes/index.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/InputTypes/index.tsx b/src/components/InputTypes/index.tsx
index a597c94..2481d64 100644
--- a/src/components/InputTypes/index.tsx
+++ b/src/components/InputTypes/index.tsx
@@ -24,6 +24,15 @@ export default function create_input({ question, public_state }: QuestionProp, h
     // eslint-disable-next-line
     // @ts-ignore
     let options: string[] = question.data["options"];
+    let valid = true;
+    if (!public_state.get("valid")) {
+        valid = false;
+    }
+    const rawError = public_state.get("error");
+    let error = "";
+    if (typeof rawError === "string") {
+        error = rawError;
+    }
 
     // Catch input types that require options but don't have any
     if ((options === undefined || typeof options !== "object") && require_options.includes(question.type)) {
@@ -34,7 +43,7 @@ export default function create_input({ question, public_state }: QuestionProp, h
     /* eslint-disable react/react-in-jsx-scope */
     switch (question.type) {
         case QuestionType.TextArea:
-            result = <TextArea handler={handler} required={question.required} />;
+            result = <TextArea handler={handler} required={question.required} valid={valid} error={error} />;
             break;
 
         case QuestionType.Checkbox:
@@ -63,7 +72,7 @@ export default function create_input({ question, public_state }: QuestionProp, h
             break;
 
         default:
-            result = <TextArea handler={handler} required={question.required}/>;
+            result = <TextArea handler={handler} required={question.required} valid={valid} error={error}/>;
     }
     /* eslint-enable react/react-in-jsx-scope */
 
-- 
cgit v1.2.3


From dbc3c8a69392a81283b29248d31bd92a23025367 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 18 Jan 2021 11:54:12 +0200
Subject: Move invalid styles to common styles

---
 src/commonStyles.tsx                   |  8 ++++++++
 src/components/InputTypes/TextArea.tsx | 10 +---------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx
index 89a2746..f5a5beb 100644
--- a/src/commonStyles.tsx
+++ b/src/commonStyles.tsx
@@ -1,4 +1,5 @@
 import { css } from "@emotion/react";
+import colors from "./colors";
 
 const selectable = css`
   -moz-user-select: text;
@@ -50,6 +51,12 @@ const textInputs = css`
   border-radius: 8px;
 `;
 
+const invalidStyles = css`
+  .invalid-box {
+    box-shadow: 0 0 10px ${colors.error};
+    border: none;
+  }
+`;
 
 export {
     selectable,
@@ -57,4 +64,5 @@ export {
     hiddenInput,
     multiSelectInput,
     textInputs,
+    invalidStyles
 };
diff --git a/src/components/InputTypes/TextArea.tsx b/src/components/InputTypes/TextArea.tsx
index a09ce8a..6729499 100644
--- a/src/components/InputTypes/TextArea.tsx
+++ b/src/components/InputTypes/TextArea.tsx
@@ -1,9 +1,8 @@
 /** @jsx jsx */
 import { jsx, css } from "@emotion/react";
 import React, { ChangeEvent } from "react";
-import { textInputs } from "../../commonStyles";
+import { invalidStyles, textInputs } from "../../commonStyles";
 import ErrorMessage from "../ErrorMessage";
-import colors from "../../colors";
 
 interface TextAreaProps {
     handler: (event: ChangeEvent<HTMLTextAreaElement>) => void,
@@ -21,13 +20,6 @@ const styles = css`
   padding: 1rem;
 `;
 
-const invalidStyles = css`
-  .invalid-box {
-    box-shadow: 0 0 10px ${colors.error};
-    border: none;
-  }
-`;
-
 export default function TextArea(props: TextAreaProps): JSX.Element {
     return (
         <div css={invalidStyles}>
-- 
cgit v1.2.3


From 3b87a8e4d9b1add82f7667454c5a049f27346d1b Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 18 Jan 2021 13:41:17 +0200
Subject: Move ErrorMessage from TextArea component to Question

---
 src/components/InputTypes/TextArea.tsx | 11 ++++-------
 src/components/Question.tsx            | 36 ++++++++++++++++++++++++++++++----
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/components/InputTypes/TextArea.tsx b/src/components/InputTypes/TextArea.tsx
index 6729499..10dbf10 100644
--- a/src/components/InputTypes/TextArea.tsx
+++ b/src/components/InputTypes/TextArea.tsx
@@ -1,14 +1,12 @@
 /** @jsx jsx */
 import { jsx, css } from "@emotion/react";
-import React, { ChangeEvent } from "react";
+import React, { ChangeEvent, FocusEvent } from "react";
 import { invalidStyles, textInputs } from "../../commonStyles";
-import ErrorMessage from "../ErrorMessage";
 
 interface TextAreaProps {
     handler: (event: ChangeEvent<HTMLTextAreaElement>) => void,
-    required: boolean,
-    valid: boolean,
-    error: string
+    onBlurHandler: (event: FocusEvent<HTMLTextAreaElement>) => void,
+    valid: boolean
 }
 
 const styles = css`
@@ -23,8 +21,7 @@ const styles = css`
 export default function TextArea(props: TextAreaProps): JSX.Element {
     return (
         <div css={invalidStyles}>
-            <textarea css={[textInputs, styles]} placeholder="Enter Text..." onChange={props.handler} className={!props.valid ? "invalid-box" : ""} required={props.required}/>
-            <ErrorMessage show={!props.valid} message={props.error}/>
+            <textarea css={[textInputs, styles]} placeholder="Enter Text..." onChange={props.handler} onBlur={props.onBlurHandler} className={!props.valid ? "invalid-box" : ""}/>
         </div>
     );
 }
diff --git a/src/components/Question.tsx b/src/components/Question.tsx
index 7a8c85b..0c32ed5 100644
--- a/src/components/Question.tsx
+++ b/src/components/Question.tsx
@@ -1,10 +1,12 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
 /** @jsx jsx */
 import { jsx, css } from "@emotion/react";
-import React, { ChangeEvent } from "react";
+import React, { ChangeEvent, FocusEvent } from "react";
 
 import { Question, QuestionType } from "../api/question";
 import { selectable } from "../commonStyles";
 import create_input from "./InputTypes";
+import ErrorMessage from "./ErrorMessage";
 
 const skip_normal_state: Array<QuestionType> = [
     QuestionType.Radio,
@@ -24,8 +26,10 @@ class RenderedQuestion extends React.Component<QuestionProp> {
         super(props);
         if (props.question.type === QuestionType.TextArea) {
             this.handler = this.text_area_handler.bind(this);
+            this.blurHandler = this.on_blur_textarea_handler.bind(this);
         } else {
             this.handler = this.normal_handler.bind(this);
+            this.blurHandler = this.on_blur_handler.bind(this);
         }
         this.setPublicState("valid", true);
         this.setPublicState("error", "");
@@ -42,6 +46,7 @@ class RenderedQuestion extends React.Component<QuestionProp> {
 
     // This is here to allow dynamic selection between the general handler, and the textarea handler.
     handler(_: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void {} // eslint-disable-line
+    blurHandler(_: FocusEvent<HTMLInputElement | HTMLTextAreaElement>): void {} // eslint-disable-line
 
     normal_handler(event: ChangeEvent<HTMLInputElement>): void {
         let target: string;
@@ -78,14 +83,27 @@ class RenderedQuestion extends React.Component<QuestionProp> {
     }
 
     text_area_handler(event: ChangeEvent<HTMLTextAreaElement>): void {
+        // We will validate again when focusing out.
+        this.setPublicState("valid", true);
+        this.setPublicState("error", "");
+
+        this.setPublicState("value", event.target.value);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    on_blur_handler(event: FocusEvent<HTMLInputElement>): void {
+        
+    }
+
+    on_blur_textarea_handler(event: FocusEvent<HTMLTextAreaElement>): void {
         if (this.props.question.required && event.target.value === "") {
             this.setPublicState("error", "Field must be filled.");
             this.setPublicState("valid", false);
         } else {
             this.setPublicState("valid", true);
+            this.setPublicState("error", "");
         }
-
-        this.setPublicState("value", event.target.value);
     }
 
     componentDidMount(): void {
@@ -160,12 +178,22 @@ class RenderedQuestion extends React.Component<QuestionProp> {
                 margin-left: 0.2rem;
               }
             `;
+            let valid = true;
+            if (!this.props.public_state.get("valid")) {
+                valid = false;
+            }
+            const rawError = this.props.public_state.get("error");
+            let error = "";
+            if (typeof rawError === "string") {
+                error = rawError;
+            }
 
             return <div>
                 <h2 css={[selectable, requiredStarStyles]}>
                     {question.name}<span className={question.required ? "required" : ""}>*</span>
                 </h2>
-                { create_input(this.props, this.handler) }
+                { create_input(this.props, this.handler, this.blurHandler) }
+                <ErrorMessage show={!valid} message={error} />
                 <hr css={css`color: gray; margin: 3rem 0;`}/>
             </div>;
         }
-- 
cgit v1.2.3


From 1030ccd3b7d7b7956bc4c6665db46fee96a70bcd Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 18 Jan 2021 13:43:09 +0200
Subject: Relay blur handler to specific component and cleanup

---
 src/components/InputTypes/index.tsx | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/components/InputTypes/index.tsx b/src/components/InputTypes/index.tsx
index 2481d64..cbff5e2 100644
--- a/src/components/InputTypes/index.tsx
+++ b/src/components/InputTypes/index.tsx
@@ -6,7 +6,7 @@ import Select from "./Select";
 import ShortText from "./ShortText";
 import TextArea from "./TextArea";
 
-import React, { ChangeEvent } from "react";
+import React, { ChangeEvent, FocusEvent } from "react";
 
 import { QuestionType } from "../../api/question";
 import { QuestionProp } from "../Question";
@@ -18,7 +18,7 @@ const require_options: Array<QuestionType> = [
     QuestionType.Range
 ];
 
-export default function create_input({ question, public_state }: QuestionProp, handler: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void): JSX.Element | JSX.Element[] {
+export default function create_input({ question, public_state }: QuestionProp, handler: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void, blurHandler: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void): JSX.Element | JSX.Element[] {
     let result: JSX.Element | JSX.Element[];
 
     // eslint-disable-next-line
@@ -28,11 +28,6 @@ export default function create_input({ question, public_state }: QuestionProp, h
     if (!public_state.get("valid")) {
         valid = false;
     }
-    const rawError = public_state.get("error");
-    let error = "";
-    if (typeof rawError === "string") {
-        error = rawError;
-    }
 
     // Catch input types that require options but don't have any
     if ((options === undefined || typeof options !== "object") && require_options.includes(question.type)) {
@@ -43,7 +38,7 @@ export default function create_input({ question, public_state }: QuestionProp, h
     /* eslint-disable react/react-in-jsx-scope */
     switch (question.type) {
         case QuestionType.TextArea:
-            result = <TextArea handler={handler} required={question.required} valid={valid} error={error} />;
+            result = <TextArea handler={handler} valid={valid} onBlurHandler={blurHandler}/>;
             break;
 
         case QuestionType.Checkbox:
@@ -72,7 +67,7 @@ export default function create_input({ question, public_state }: QuestionProp, h
             break;
 
         default:
-            result = <TextArea handler={handler} required={question.required} valid={valid} error={error}/>;
+            result = <TextArea handler={handler} valid={valid} onBlurHandler={blurHandler}/>;
     }
     /* eslint-enable react/react-in-jsx-scope */
 
-- 
cgit v1.2.3


From b62d0907dafba6f662c33a061ed9e5397b3f4ffc Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 18 Jan 2021 17:07:00 +0200
Subject: Change ErrorMessage CSS properties

---
 src/components/ErrorMessage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
index f807817..55e3759 100644
--- a/src/components/ErrorMessage.tsx
+++ b/src/components/ErrorMessage.tsx
@@ -9,9 +9,9 @@ interface ErrorMessageProps {
 
 const styles = css`
   color: ${colors.error};
-  font-size: 20px;
+  font-size: 18px;
   line-height: 15px;
-  margin: 10px 0 0;
+  margin: 15px 0 0;
 `;
 
 export default function ErrorMessage(props: ErrorMessageProps): JSX.Element|null {
-- 
cgit v1.2.3


From e37170d3becd6f43d9f7779d38afd2cd787e6248 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 18 Jan 2021 17:53:43 +0200
Subject: Add required validator for ShortText

---
 src/components/Question.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/Question.tsx b/src/components/Question.tsx
index 0c32ed5..3994950 100644
--- a/src/components/Question.tsx
+++ b/src/components/Question.tsx
@@ -80,6 +80,12 @@ class RenderedQuestion extends React.Component<QuestionProp> {
             event.target.parentElement.classList.toggle("unselected");
             event.target.parentElement.classList.toggle("selected");
         }
+
+        switch (event.target.type) {
+            case "text":
+                this.setPublicState("valid", true);
+                break;
+        }
     }
 
     text_area_handler(event: ChangeEvent<HTMLTextAreaElement>): void {
@@ -93,7 +99,16 @@ class RenderedQuestion extends React.Component<QuestionProp> {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     on_blur_handler(event: FocusEvent<HTMLInputElement>): void {
-        
+        if (this.props.question.required) {
+            switch (event.target.type) {
+                case "text":
+                    if (event.target.value === "") {
+                        this.setPublicState("error", "Field must be filled.");
+                        this.setPublicState("valid", false);
+                    }
+                    break;
+            }
+        }
     }
 
     on_blur_textarea_handler(event: FocusEvent<HTMLTextAreaElement>): void {
-- 
cgit v1.2.3


From 2d7c77048609f97e0b94d7cb0d8c859a95e07285 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 18 Jan 2021 17:58:01 +0200
Subject: Implement validation to ShortText component

---
 src/components/InputTypes/ShortText.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/InputTypes/ShortText.tsx b/src/components/InputTypes/ShortText.tsx
index d34bd01..5509a45 100644
--- a/src/components/InputTypes/ShortText.tsx
+++ b/src/components/InputTypes/ShortText.tsx
@@ -1,13 +1,18 @@
 /** @jsx jsx */
 import { jsx } from "@emotion/react";
-import React, { ChangeEvent } from "react";
-import { textInputs } from "../../commonStyles";
+import React, { ChangeEvent, FocusEvent } from "react";
+import { textInputs, invalidStyles } from "../../commonStyles";
 
 interface ShortTextProps {
     handler: (event: ChangeEvent<HTMLInputElement>) => void,
-    required: boolean
+    blurHandler: (event: FocusEvent<HTMLInputElement>) => void,
+    valid: boolean
 }
 
 export default function ShortText(props: ShortTextProps): JSX.Element {
-    return <input type="text" css={textInputs} placeholder="Enter Text..." onChange={props.handler}/>;
+    return (
+        <div css={invalidStyles}>
+            <input type="text" css={textInputs} placeholder="Enter Text..." onChange={props.handler} onBlur={props.blurHandler} className={!props.valid ? "invalid-box" : ""}/>
+        </div>
+    );
 }
-- 
cgit v1.2.3


From ad1759b3f2a370855445e9a138d9355028d65d2a Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 18 Jan 2021 18:00:10 +0200
Subject: Pass blur handler and valid property to ShortText

---
 src/components/InputTypes/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/InputTypes/index.tsx b/src/components/InputTypes/index.tsx
index cbff5e2..13cbb9c 100644
--- a/src/components/InputTypes/index.tsx
+++ b/src/components/InputTypes/index.tsx
@@ -54,7 +54,7 @@ export default function create_input({ question, public_state }: QuestionProp, h
             break;
 
         case QuestionType.ShortText:
-            result = <ShortText handler={handler} required={question.required}/>;
+            result = <ShortText handler={handler} blurHandler={blurHandler} valid={valid}/>;
             break;
 
         case QuestionType.Range:
-- 
cgit v1.2.3


From aaa26c103d76963e4863ae46a7095bb7af93f33a Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 18 Jan 2021 20:09:32 +0200
Subject: Implement Select field required check

---
 src/components/InputTypes/Select.tsx |  5 +++--
 src/components/InputTypes/index.tsx  |  4 ++--
 src/components/Question.tsx          | 19 +++++++++++++++++--
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/InputTypes/Select.tsx b/src/components/InputTypes/Select.tsx
index 4e66002..251b637 100644
--- a/src/components/InputTypes/Select.tsx
+++ b/src/components/InputTypes/Select.tsx
@@ -6,7 +6,8 @@ import { hiddenInput } from "../../commonStyles";
 interface SelectProps {
     options: Array<string>,
     state_dict: Map<string, string | boolean | null>,
-    required: boolean
+    required: boolean,
+    handleBlur: (event: React.FocusEvent<HTMLDivElement>) => void
 }
 
 const containerStyles = css`
@@ -183,7 +184,7 @@ class Select extends React.Component<SelectProps> {
         const handle_click = (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => this.handle_click(container_ref, selected_option_ref, event);
 
         return (
-            <div css={[containerStyles, arrowStyles, optionContainerStyles]} ref={container_ref}>
+            <div css={[containerStyles, arrowStyles, optionContainerStyles]} ref={container_ref} onBlur={this.props.handleBlur}>
                 <div className="selected_container" css={mainWindowStyles}>
                     <span className="arrow"/>
                     <div tabIndex={0} className="selected_option" ref={selected_option_ref} onMouseDown={handle_click} onKeyDown={handle_click}>...</div>
diff --git a/src/components/InputTypes/index.tsx b/src/components/InputTypes/index.tsx
index 13cbb9c..06341da 100644
--- a/src/components/InputTypes/index.tsx
+++ b/src/components/InputTypes/index.tsx
@@ -18,7 +18,7 @@ const require_options: Array<QuestionType> = [
     QuestionType.Range
 ];
 
-export default function create_input({ question, public_state }: QuestionProp, handler: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void, blurHandler: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void): JSX.Element | JSX.Element[] {
+export default function create_input({ question, public_state }: QuestionProp, handler: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void, blurHandler: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLDivElement>) => void): JSX.Element | JSX.Element[] {
     let result: JSX.Element | JSX.Element[];
 
     // eslint-disable-next-line
@@ -50,7 +50,7 @@ export default function create_input({ question, public_state }: QuestionProp, h
             break;
 
         case QuestionType.Select:
-            result = <Select options={options} state_dict={public_state} required={question.required}/>;
+            result = <Select options={options} state_dict={public_state} required={question.required} handleBlur={blurHandler}/>;
             break;
 
         case QuestionType.ShortText:
diff --git a/src/components/Question.tsx b/src/components/Question.tsx
index 3994950..06dceb1 100644
--- a/src/components/Question.tsx
+++ b/src/components/Question.tsx
@@ -29,7 +29,11 @@ class RenderedQuestion extends React.Component<QuestionProp> {
             this.blurHandler = this.on_blur_textarea_handler.bind(this);
         } else {
             this.handler = this.normal_handler.bind(this);
-            this.blurHandler = this.on_blur_handler.bind(this);
+            if (props.question.type === QuestionType.Select) {
+                this.blurHandler = this.on_blur_select_handler.bind(this);
+            } else {
+                this.blurHandler = this.on_blur_handler.bind(this);
+            }
         }
         this.setPublicState("valid", true);
         this.setPublicState("error", "");
@@ -46,7 +50,7 @@ class RenderedQuestion extends React.Component<QuestionProp> {
 
     // This is here to allow dynamic selection between the general handler, and the textarea handler.
     handler(_: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void {} // eslint-disable-line
-    blurHandler(_: FocusEvent<HTMLInputElement | HTMLTextAreaElement>): void {} // eslint-disable-line
+    blurHandler(_: FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLDivElement>): void {} // eslint-disable-line
 
     normal_handler(event: ChangeEvent<HTMLInputElement>): void {
         let target: string;
@@ -111,6 +115,17 @@ class RenderedQuestion extends React.Component<QuestionProp> {
         }
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    on_blur_select_handler(_: FocusEvent<HTMLDivElement>): void {
+        if (this.props.question.required && !this.props.public_state.get("value")) {
+            this.setPublicState("error", "Field must be filled.");
+            this.setPublicState("valid", false);
+        } else {
+            this.setPublicState("error", "");
+            this.setPublicState("valid", true);
+        }
+    }
+
     on_blur_textarea_handler(event: FocusEvent<HTMLTextAreaElement>): void {
         if (this.props.question.required && event.target.value === "") {
             this.setPublicState("error", "Field must be filled.");
-- 
cgit v1.2.3


From c1d3dbd8852c133a2d86ea0219ce19db8d829bd6 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 18 Jan 2021 20:17:12 +0200
Subject: Merge on blur functions to one

---
 src/components/Question.tsx | 80 +++++++++++++++++++++------------------------
 1 file changed, 37 insertions(+), 43 deletions(-)

diff --git a/src/components/Question.tsx b/src/components/Question.tsx
index 06dceb1..45a030b 100644
--- a/src/components/Question.tsx
+++ b/src/components/Question.tsx
@@ -26,15 +26,11 @@ class RenderedQuestion extends React.Component<QuestionProp> {
         super(props);
         if (props.question.type === QuestionType.TextArea) {
             this.handler = this.text_area_handler.bind(this);
-            this.blurHandler = this.on_blur_textarea_handler.bind(this);
         } else {
             this.handler = this.normal_handler.bind(this);
-            if (props.question.type === QuestionType.Select) {
-                this.blurHandler = this.on_blur_select_handler.bind(this);
-            } else {
-                this.blurHandler = this.on_blur_handler.bind(this);
-            }
         }
+        this.blurHandler = this.blurHandler.bind(this);
+
         this.setPublicState("valid", true);
         this.setPublicState("error", "");
 
@@ -50,7 +46,41 @@ class RenderedQuestion extends React.Component<QuestionProp> {
 
     // This is here to allow dynamic selection between the general handler, and the textarea handler.
     handler(_: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void {} // eslint-disable-line
-    blurHandler(_: FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLDivElement>): void {} // eslint-disable-line
+
+    blurHandler(event: FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLDivElement>): void {
+        if (this.props.question.required) {
+            switch (this.props.question.type) {
+                case QuestionType.ShortText:
+                    if (event.target.value === "") {
+                        this.setPublicState("error", "Field must be filled.");
+                        this.setPublicState("valid", false);
+                    } else {
+                        this.setPublicState("valid", true);
+                        this.setPublicState("error", "");
+                    }
+                    break;
+                
+                case QuestionType.TextArea:
+                    if (event.target.value === "") {
+                        this.setPublicState("error", "Field must be filled.");
+                        this.setPublicState("valid", false);
+                    } else {
+                        this.setPublicState("valid", true);
+                        this.setPublicState("error", "");
+                    }
+                    break;
+                
+                case QuestionType.Select:
+                    if (!this.props.public_state.get("value")) {
+                        this.setPublicState("error", "Field must be filled.");
+                        this.setPublicState("valid", false);
+                    } else {
+                        this.setPublicState("error", "");
+                        this.setPublicState("valid", true);
+                    }
+            }
+        }
+    }
 
     normal_handler(event: ChangeEvent<HTMLInputElement>): void {
         let target: string;
@@ -100,42 +130,6 @@ class RenderedQuestion extends React.Component<QuestionProp> {
         this.setPublicState("value", event.target.value);
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    on_blur_handler(event: FocusEvent<HTMLInputElement>): void {
-        if (this.props.question.required) {
-            switch (event.target.type) {
-                case "text":
-                    if (event.target.value === "") {
-                        this.setPublicState("error", "Field must be filled.");
-                        this.setPublicState("valid", false);
-                    }
-                    break;
-            }
-        }
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    on_blur_select_handler(_: FocusEvent<HTMLDivElement>): void {
-        if (this.props.question.required && !this.props.public_state.get("value")) {
-            this.setPublicState("error", "Field must be filled.");
-            this.setPublicState("valid", false);
-        } else {
-            this.setPublicState("error", "");
-            this.setPublicState("valid", true);
-        }
-    }
-
-    on_blur_textarea_handler(event: FocusEvent<HTMLTextAreaElement>): void {
-        if (this.props.question.required && event.target.value === "") {
-            this.setPublicState("error", "Field must be filled.");
-            this.setPublicState("valid", false);
-        } else {
-            this.setPublicState("valid", true);
-            this.setPublicState("error", "");
-        }
-    }
-
     componentDidMount(): void {
         // Initialize defaults for complex and nested fields
         const options: string | string[] = this.props.question.data["options"];
-- 
cgit v1.2.3


From cbc846b1be3d8da9e11bd260073549e731849758 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 18 Jan 2021 20:20:47 +0200
Subject: Simplify required checking onBlur function

---
 src/components/Question.tsx | 28 +++++++++++++---------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/components/Question.tsx b/src/components/Question.tsx
index 45a030b..12cde5d 100644
--- a/src/components/Question.tsx
+++ b/src/components/Question.tsx
@@ -49,35 +49,33 @@ class RenderedQuestion extends React.Component<QuestionProp> {
 
     blurHandler(event: FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLDivElement>): void {
         if (this.props.question.required) {
+            let invalid = false;
             switch (this.props.question.type) {
                 case QuestionType.ShortText:
                     if (event.target.value === "") {
-                        this.setPublicState("error", "Field must be filled.");
-                        this.setPublicState("valid", false);
-                    } else {
-                        this.setPublicState("valid", true);
-                        this.setPublicState("error", "");
+                        invalid = true;
                     }
                     break;
                 
                 case QuestionType.TextArea:
                     if (event.target.value === "") {
-                        this.setPublicState("error", "Field must be filled.");
-                        this.setPublicState("valid", false);
-                    } else {
-                        this.setPublicState("valid", true);
-                        this.setPublicState("error", "");
+                        invalid = true;
                     }
                     break;
                 
                 case QuestionType.Select:
                     if (!this.props.public_state.get("value")) {
-                        this.setPublicState("error", "Field must be filled.");
-                        this.setPublicState("valid", false);
-                    } else {
-                        this.setPublicState("error", "");
-                        this.setPublicState("valid", true);
+                        invalid = true;
                     }
+                    break;
+            }
+
+            if (invalid) {
+                this.setPublicState("error", "Field must be filled.");
+                this.setPublicState("valid", false);
+            } else {
+                this.setPublicState("error", "");
+                this.setPublicState("valid", true);
             }
         }
     }
-- 
cgit v1.2.3


From a1a52d20df364491aa31399bd4df034231ca3732 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 18 Jan 2021 20:28:12 +0200
Subject: Implement shadow for Select

---
 src/components/InputTypes/Select.tsx | 8 ++++----
 src/components/InputTypes/index.tsx  | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/InputTypes/Select.tsx b/src/components/InputTypes/Select.tsx
index 251b637..f0d13d3 100644
--- a/src/components/InputTypes/Select.tsx
+++ b/src/components/InputTypes/Select.tsx
@@ -1,12 +1,12 @@
 /** @jsx jsx */
 import { jsx, css } from "@emotion/react";
 import React from "react";
-import { hiddenInput } from "../../commonStyles";
+import { hiddenInput, invalidStyles } from "../../commonStyles";
 
 interface SelectProps {
     options: Array<string>,
     state_dict: Map<string, string | boolean | null>,
-    required: boolean,
+    valid: boolean,
     handleBlur: (event: React.FocusEvent<HTMLDivElement>) => void
 }
 
@@ -184,8 +184,8 @@ class Select extends React.Component<SelectProps> {
         const handle_click = (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => this.handle_click(container_ref, selected_option_ref, event);
 
         return (
-            <div css={[containerStyles, arrowStyles, optionContainerStyles]} ref={container_ref} onBlur={this.props.handleBlur}>
-                <div className="selected_container" css={mainWindowStyles}>
+            <div css={[containerStyles, arrowStyles, optionContainerStyles, invalidStyles]} ref={container_ref} onBlur={this.props.handleBlur}>
+                <div css={mainWindowStyles} className={!this.props.valid ? "invalid-box selected_container" : "selected_container"}>
                     <span className="arrow"/>
                     <div tabIndex={0} className="selected_option" ref={selected_option_ref} onMouseDown={handle_click} onKeyDown={handle_click}>...</div>
                 </div>
diff --git a/src/components/InputTypes/index.tsx b/src/components/InputTypes/index.tsx
index 06341da..04c992b 100644
--- a/src/components/InputTypes/index.tsx
+++ b/src/components/InputTypes/index.tsx
@@ -50,7 +50,7 @@ export default function create_input({ question, public_state }: QuestionProp, h
             break;
 
         case QuestionType.Select:
-            result = <Select options={options} state_dict={public_state} required={question.required} handleBlur={blurHandler}/>;
+            result = <Select options={options} state_dict={public_state} valid={valid} handleBlur={blurHandler}/>;
             break;
 
         case QuestionType.ShortText:
-- 
cgit v1.2.3


From cf8e125c867ff01852a03a6eb107be2e2cc96c8f Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Tue, 19 Jan 2021 08:12:16 +0200
Subject: Implement validation for checkboxes

---
 src/components/Question.tsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/components/Question.tsx b/src/components/Question.tsx
index 12cde5d..81c43b2 100644
--- a/src/components/Question.tsx
+++ b/src/components/Question.tsx
@@ -113,10 +113,28 @@ class RenderedQuestion extends React.Component<QuestionProp> {
             event.target.parentElement.classList.toggle("selected");
         }
 
+        const options: string | string[] = this.props.question.data["options"];
         switch (event.target.type) {
             case "text":
                 this.setPublicState("valid", true);
                 break;
+            
+            case "checkbox":
+                // We need to check this here, because checkbox doesn't have onBlur
+                if (this.props.question.required && typeof options !== "string") {
+                    const keys: string[] = [];
+                    options.forEach((val, index) => {
+                        keys.push(`${("000" + index).slice(-4)}. ${val}`);
+                    });
+                    if (keys.every(v => !this.props.public_state.get(v))) {
+                        this.setPublicState("error", "Field must be filled.");
+                        this.setPublicState("valid", false);
+                    } else {
+                        this.setPublicState("error", "");
+                        this.setPublicState("valid", true);
+                    }
+                }
+                break;
         }
     }
 
-- 
cgit v1.2.3


From 0870589dab3fa46f59a1d6b128528c570da74cc7 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Tue, 19 Jan 2021 14:14:38 +0200
Subject: Implement before-submit validation (broken, crashing)

---
 src/components/Question.tsx | 63 ++++++++++++++++++++++++++++++++++++++++++++-
 src/pages/FormPage.tsx      | 36 +++++++++++++++++++++++---
 2 files changed, 94 insertions(+), 5 deletions(-)

diff --git a/src/components/Question.tsx b/src/components/Question.tsx
index 81c43b2..df9d18e 100644
--- a/src/components/Question.tsx
+++ b/src/components/Question.tsx
@@ -19,6 +19,7 @@ const skip_normal_state: Array<QuestionType> = [
 export type QuestionProp = {
     question: Question,
     public_state: Map<string, string | boolean | null>,
+    scroll_ref: React.RefObject<HTMLDivElement>
 }
 
 class RenderedQuestion extends React.Component<QuestionProp> {
@@ -146,6 +147,66 @@ class RenderedQuestion extends React.Component<QuestionProp> {
         this.setPublicState("value", event.target.value);
     }
 
+    validateField(): void {
+        if (!this.props.question.required) {
+            return;
+        }
+
+        let invalid = false;
+        const options: string | string[] = this.props.question.data["options"];
+        switch (this.props.question.type) {
+            case QuestionType.TextArea:
+                if (this.props.public_state.get("value") === "") {
+                    invalid = true;
+                }
+                break;
+            
+            case QuestionType.ShortText:
+                if (this.props.public_state.get("value") === "") {
+                    invalid = true;
+                }
+                break;
+            
+            case QuestionType.Select:
+                if (!this.props.public_state.get("value")) {
+                    invalid = true;
+                }
+                break;
+
+            case QuestionType.Range:
+                if (!this.props.public_state.get("value")) {
+                    invalid = true;
+                }
+                break;
+
+            case QuestionType.Radio:
+                if (!this.props.public_state.get("value")) {
+                    invalid = true;
+                }
+                break;
+
+            case QuestionType.Checkbox:
+                if (typeof options !== "string") {
+                    const keys: string[] = [];
+                    options.forEach((val, index) => {
+                        keys.push(`${("000" + index).slice(-4)}. ${val}`);
+                    });
+                    if (keys.every(v => !this.props.public_state.get(v))) {
+                        invalid = true;
+                    }
+                }
+                break;
+        }
+
+        if (invalid) {
+            this.setPublicState("error", "Field must be filled.");
+            this.setPublicState("valid", false);
+        } else {
+            this.setPublicState("error", "");
+            this.setPublicState("valid", true);
+        }
+    }
+
     componentDidMount(): void {
         // Initialize defaults for complex and nested fields
         const options: string | string[] = this.props.question.data["options"];
@@ -228,7 +289,7 @@ class RenderedQuestion extends React.Component<QuestionProp> {
                 error = rawError;
             }
 
-            return <div>
+            return <div ref={this.props.scroll_ref}>
                 <h2 css={[selectable, requiredStarStyles]}>
                     {question.name}<span className={question.required ? "required" : ""}>*</span>
                 </h2>
diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index c49b9fd..6c7cad2 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -2,7 +2,7 @@
 import { jsx, css } from "@emotion/react";
 import { Link } from "react-router-dom";
 
-import React, { SyntheticEvent, useEffect, useState } from "react";
+import React, { SyntheticEvent, useEffect, useState, createRef, RefObject } from "react";
 import { useParams } from "react-router";
 
 import HeaderBar from "../components/HeaderBar";
@@ -13,6 +13,7 @@ import ScrollToTop from "../components/ScrollToTop";
 import { Form, FormFeatures, getForm } from "../api/forms";
 import colors from "../colors";
 import { unselectable }  from "../commonStyles";
+import { Question } from "../api/question";
 
 
 interface PathParams {
@@ -167,12 +168,36 @@ function FormPage(): JSX.Element {
         return <Loading/>;
     }
 
-    const questions = form.questions.map((question, index) => {
-        return <RenderedQuestion question={question} public_state={new Map()} key={index + Date.now()}/>;
+    const questionsMap: Map<string, JSX.Element> = new Map();
+    form.questions.map((question, index) => {
+        questionsMap.set(question.id, <RenderedQuestion ref={createRef<RenderedQuestion>()} scroll_ref={createRef<HTMLDivElement>()} question={question} public_state={new Map()} key={index + Date.now()}/>);
     });
 
     function handleSubmit(event: SyntheticEvent) {
-        questions.forEach(prop => {
+        // Client-side required validation
+        const invalidFieldIds: string[] = [];
+        questionsMap.forEach((prop, id) => {
+            const question: Question = prop.props.question;
+            if (!question.required) {
+                return;
+            }
+
+            prop.ref.current.validateField();
+            // In case when field is invalid, add this to invalid fields list.
+            if (prop.props.public_state.get("valid") === false) {
+                invalidFieldIds.push(id);
+            }
+        });
+
+        if (invalidFieldIds.length) {
+            const firstErrored = questionsMap.get(invalidFieldIds[0]);
+            if (firstErrored !== undefined) {
+                firstErrored.props.scroll_ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
+            }
+            return;
+        }
+
+        questionsMap.forEach(prop => {
             const question = prop.props.question;
 
             // TODO: Parse input from each question, and submit
@@ -192,6 +217,9 @@ function FormPage(): JSX.Element {
         closed_header = <div css={closedHeaderStyles}>This form is now closed. You will not be able to submit your response.</div>;
     }
 
+    const questions: JSX.Element[] = [];
+    questionsMap.forEach(val => questions.push(val));
+
     return (
         <div>
             <HeaderBar title={form.name} description={form.description}/>
-- 
cgit v1.2.3


From 4cf4ae1a0195f0e0923ee48b428b94447e8f64b0 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Tue, 19 Jan 2021 14:27:24 +0200
Subject: Add preventDefault to avoid reloading of page

---
 src/pages/FormPage.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index 6c7cad2..1a9b7cf 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -174,6 +174,7 @@ function FormPage(): JSX.Element {
     });
 
     function handleSubmit(event: SyntheticEvent) {
+        event.preventDefault();
         // Client-side required validation
         const invalidFieldIds: string[] = [];
         questionsMap.forEach((prop, id) => {
-- 
cgit v1.2.3


From 3a2338e44b368defe441b91a9c0e60b6a679f871 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Tue, 19 Jan 2021 14:33:35 +0200
Subject: Remove preventDefault from end

---
 src/pages/FormPage.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index 1a9b7cf..06d20d6 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -207,8 +207,6 @@ function FormPage(): JSX.Element {
                     console.log(question.id, prop.props.public_state);
             }
         });
-
-        event.preventDefault();
     }
 
     const open: boolean = form.features.includes(FormFeatures.Open);
-- 
cgit v1.2.3


From 7db4972038dd1c27a75d50cd539f7d3c79e51bee Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Tue, 19 Jan 2021 15:29:49 +0200
Subject: Implement form submitting

---
 src/pages/FormPage.tsx | 33 ++++++++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index 06d20d6..dc023a6 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -13,7 +13,8 @@ import ScrollToTop from "../components/ScrollToTop";
 import { Form, FormFeatures, getForm } from "../api/forms";
 import colors from "../colors";
 import { unselectable }  from "../commonStyles";
-import { Question } from "../api/question";
+import { Question, QuestionType } from "../api/question";
+import ApiClient from "../api/client";
 
 
 interface PathParams {
@@ -173,7 +174,7 @@ function FormPage(): JSX.Element {
         questionsMap.set(question.id, <RenderedQuestion ref={createRef<RenderedQuestion>()} scroll_ref={createRef<HTMLDivElement>()} question={question} public_state={new Map()} key={index + Date.now()}/>);
     });
 
-    function handleSubmit(event: SyntheticEvent) {
+    async function handleSubmit(event: SyntheticEvent) {
         event.preventDefault();
         // Client-side required validation
         const invalidFieldIds: string[] = [];
@@ -198,15 +199,41 @@ function FormPage(): JSX.Element {
             return;
         }
 
+        const answers = {};
         questionsMap.forEach(prop => {
             const question = prop.props.question;
+            const options: string | string[] = prop.props.question.data["options"];
 
             // TODO: Parse input from each question, and submit
             switch (question.type) {
+                case QuestionType.Section:
+                    answers[question.id] = false;
+                    break;
+
+                case QuestionType.Code:
+                    answers[question.id] = "";
+                    break;
+
+                case QuestionType.Checkbox:
+                    if (typeof options !== "string") {
+                        const keys: Map<string, string> = new Map();
+                        options.forEach((val, index) => {
+                            keys.set(val, `${("000" + index).slice(-4)}. ${val}`);
+                        });
+                        const pairs = {};
+                        keys.forEach((val, key) => {
+                            pairs[key] = !!prop.props.public_state.get(val);
+                        });
+                        answers[question.id] = pairs;
+                    }
+                    break;
+
                 default:
-                    console.log(question.id, prop.props.public_state);
+                    answers[question.id] = prop.props.public_state.get("value");
             }
         });
+
+        await ApiClient.post(`forms/submit/${id}`, {response: answers});
     }
 
     const open: boolean = form.features.includes(FormFeatures.Open);
-- 
cgit v1.2.3


From db9bc59c8b92141e1783629a345a6f7220417123 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Tue, 19 Jan 2021 15:35:07 +0200
Subject: Un-refactor map to array for questions

---
 src/pages/FormPage.tsx | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index dc023a6..b4a8903 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -169,16 +169,15 @@ function FormPage(): JSX.Element {
         return <Loading/>;
     }
 
-    const questionsMap: Map<string, JSX.Element> = new Map();
-    form.questions.map((question, index) => {
-        questionsMap.set(question.id, <RenderedQuestion ref={createRef<RenderedQuestion>()} scroll_ref={createRef<HTMLDivElement>()} question={question} public_state={new Map()} key={index + Date.now()}/>);
+    const questions = form.questions.map((question, index) => {
+        return <RenderedQuestion ref={createRef<RenderedQuestion>()} scroll_ref={createRef<HTMLDivElement>()} question={question} public_state={new Map()} key={index + Date.now()}/>;
     });
 
     async function handleSubmit(event: SyntheticEvent) {
         event.preventDefault();
         // Client-side required validation
-        const invalidFieldIds: string[] = [];
-        questionsMap.forEach((prop, id) => {
+        const invalidFieldIds: number[] = [];
+        questions.forEach((prop, i) => {
             const question: Question = prop.props.question;
             if (!question.required) {
                 return;
@@ -187,12 +186,12 @@ function FormPage(): JSX.Element {
             prop.ref.current.validateField();
             // In case when field is invalid, add this to invalid fields list.
             if (prop.props.public_state.get("valid") === false) {
-                invalidFieldIds.push(id);
+                invalidFieldIds.push(i);
             }
         });
 
         if (invalidFieldIds.length) {
-            const firstErrored = questionsMap.get(invalidFieldIds[0]);
+            const firstErrored = questions[invalidFieldIds[0]];
             if (firstErrored !== undefined) {
                 firstErrored.props.scroll_ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
             }
@@ -200,7 +199,7 @@ function FormPage(): JSX.Element {
         }
 
         const answers = {};
-        questionsMap.forEach(prop => {
+        questions.forEach(prop => {
             const question = prop.props.question;
             const options: string | string[] = prop.props.question.data["options"];
 
@@ -243,9 +242,6 @@ function FormPage(): JSX.Element {
         closed_header = <div css={closedHeaderStyles}>This form is now closed. You will not be able to submit your response.</div>;
     }
 
-    const questions: JSX.Element[] = [];
-    questionsMap.forEach(val => questions.push(val));
-
     return (
         <div>
             <HeaderBar title={form.name} description={form.description}/>
-- 
cgit v1.2.3


From c44a1b216d2b7472e0facef15fddf08a834b12e2 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Tue, 19 Jan 2021 16:01:44 +0200
Subject: Add webkit CSS to invalidStyle to support Safari

---
 src/commonStyles.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx
index f5a5beb..0cd68d5 100644
--- a/src/commonStyles.tsx
+++ b/src/commonStyles.tsx
@@ -53,6 +53,8 @@ const textInputs = css`
 
 const invalidStyles = css`
   .invalid-box {
+    -webkit-appearance: none;
+    -webkit-box-shadow: 0 0 10px ${colors.error};
     box-shadow: 0 0 10px ${colors.error};
     border: none;
   }
-- 
cgit v1.2.3


From 79f9c89ad857a81e349ad5d0974803ee50b98b16 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Tue, 19 Jan 2021 20:04:36 +0200
Subject: Merge switch's cases

---
 src/components/Question.tsx | 24 ++----------------------
 1 file changed, 2 insertions(+), 22 deletions(-)

diff --git a/src/components/Question.tsx b/src/components/Question.tsx
index df9d18e..750dd64 100644
--- a/src/components/Question.tsx
+++ b/src/components/Question.tsx
@@ -52,12 +52,7 @@ class RenderedQuestion extends React.Component<QuestionProp> {
         if (this.props.question.required) {
             let invalid = false;
             switch (this.props.question.type) {
-                case QuestionType.ShortText:
-                    if (event.target.value === "") {
-                        invalid = true;
-                    }
-                    break;
-                
+                case QuestionType.ShortText:   
                 case QuestionType.TextArea:
                     if (event.target.value === "") {
                         invalid = true;
@@ -155,12 +150,7 @@ class RenderedQuestion extends React.Component<QuestionProp> {
         let invalid = false;
         const options: string | string[] = this.props.question.data["options"];
         switch (this.props.question.type) {
-            case QuestionType.TextArea:
-                if (this.props.public_state.get("value") === "") {
-                    invalid = true;
-                }
-                break;
-            
+            case QuestionType.TextArea:    
             case QuestionType.ShortText:
                 if (this.props.public_state.get("value") === "") {
                     invalid = true;
@@ -168,17 +158,7 @@ class RenderedQuestion extends React.Component<QuestionProp> {
                 break;
             
             case QuestionType.Select:
-                if (!this.props.public_state.get("value")) {
-                    invalid = true;
-                }
-                break;
-
             case QuestionType.Range:
-                if (!this.props.public_state.get("value")) {
-                    invalid = true;
-                }
-                break;
-
             case QuestionType.Radio:
                 if (!this.props.public_state.get("value")) {
                     invalid = true;
-- 
cgit v1.2.3


From a49bb796c7d4eee1f8184be78f1671bdf1cef61d Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Wed, 20 Jan 2021 13:27:21 +0200
Subject: Add state for displaying thanks for submitting showing

---
 src/commonStyles.tsx   |  63 +++++++++++++++++++++++++++++-
 src/pages/FormPage.tsx | 103 +++++++++++++++++++------------------------------
 2 files changed, 101 insertions(+), 65 deletions(-)

diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx
index 0cd68d5..3ff2a2f 100644
--- a/src/commonStyles.tsx
+++ b/src/commonStyles.tsx
@@ -60,11 +60,72 @@ const invalidStyles = css`
   }
 `;
 
+const containerStyles = css`
+  margin: auto;
+  width: 50%;
+
+  text-align: center;
+  font-size: 1.5rem;
+  white-space: nowrap;
+
+  > div {
+    display: inline-block;
+    margin: 2rem auto;
+    width: 50%;
+  }
+
+  @media (max-width: 850px) {
+    width: 100%;
+
+    > div {
+      display: flex;
+      justify-content: center;
+
+      margin: 0 auto;
+    }
+  }
+
+  .return_button {
+    text-align: left;
+  }
+
+  .return_button.closed {
+    text-align: center;
+  }
+`;
+
+const separatorStyles = css`
+  height: 0;
+  display: none;
+
+  @media (max-width: 850px) {
+    display: block;
+  }
+`;
+
+const returnStyles = css`
+  padding: 0.5rem 2rem;
+  border-radius: 8px;
+
+  color: white;
+  text-decoration: none;
+
+  background-color: ${colors.greyple};
+  transition: background-color 300ms;
+
+  :hover {
+    background-color: ${colors.darkerGreyple};
+  }
+`;
+
 export {
     selectable,
     unselectable,
     hiddenInput,
     multiSelectInput,
     textInputs,
-    invalidStyles
+    invalidStyles,
+    containerStyles,
+    separatorStyles,
+    returnStyles
 };
diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index b4a8903..cf6947b 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -2,8 +2,9 @@
 import { jsx, css } from "@emotion/react";
 import { Link } from "react-router-dom";
 
-import React, { SyntheticEvent, useEffect, useState, createRef, RefObject } from "react";
+import React, { SyntheticEvent, useEffect, useState, createRef } from "react";
 import { useParams } from "react-router";
+import { PropagateLoader } from "react-spinners";
 
 import HeaderBar from "../components/HeaderBar";
 import RenderedQuestion from "../components/Question";
@@ -12,7 +13,7 @@ import ScrollToTop from "../components/ScrollToTop";
 
 import { Form, FormFeatures, getForm } from "../api/forms";
 import colors from "../colors";
-import { unselectable }  from "../commonStyles";
+import { unselectable, containerStyles, separatorStyles, returnStyles }  from "../commonStyles";
 import { Question, QuestionType } from "../api/question";
 import ApiClient from "../api/client";
 
@@ -26,65 +27,6 @@ interface NavigationProps {
 }
 
 class Navigation extends React.Component<NavigationProps> {
-    containerStyles = css`
-      margin: auto;
-      width: 50%;
-
-      text-align: center;
-      font-size: 1.5rem;
-      white-space: nowrap;
-
-      > div {
-        display: inline-block;
-        margin: 2rem auto;
-        width: 50%;
-      }
-
-      @media (max-width: 850px) {
-        width: 100%;
-
-        > div {
-          display: flex;
-          justify-content: center;
-
-          margin: 0 auto;
-        }
-      }
-
-      .return_button {
-        text-align: left;
-      }
-
-      .return_button.closed {
-        text-align: center;
-      }
-    `;
-
-    separatorStyles = css`
-      height: 0;
-      display: none;
-
-      @media (max-width: 850px) {
-        display: block;
-      }
-    `;
-
-    returnStyles = css`
-      padding: 0.5rem 2rem;
-      border-radius: 8px;
-
-      color: white;
-      text-decoration: none;
-
-      background-color: ${colors.greyple};
-      transition: background-color 300ms;
-
-      :hover {
-        background-color: ${colors.darkerGreyple};
-      }
-    }
-    `;
-
     submitStyles = css`
       text-align: right;
 
@@ -118,11 +60,11 @@ class Navigation extends React.Component<NavigationProps> {
         }
 
         return (
-            <div css={[unselectable, this.containerStyles]}>
+            <div css={[unselectable, containerStyles]}>
                 <div className={ "return_button" + (this.props.form_state ? "" : " closed") }>
-                    <Link to="/" css={this.returnStyles}>Return Home</Link>
+                    <Link to="/" css={returnStyles}>Return Home</Link>
                 </div>
-                <br css={this.separatorStyles}/>
+                <br css={separatorStyles}/>
                 { submit }
             </div>
         );
@@ -158,6 +100,8 @@ function FormPage(): JSX.Element {
     const { id } = useParams<PathParams>();
 
     const [form, setForm] = useState<Form>();
+    const [sending, setSending] = useState<boolean>();
+    const [sent, setSent] = useState<boolean>();
 
     useEffect(() => {
         getForm(id).then(form => {
@@ -165,6 +109,33 @@ function FormPage(): JSX.Element {
         });
     }, []);
 
+    if (form && sent) {
+        const thanksStyle = css`font-family: "Uni Sans", "Hind", "Arial", sans-serif;`;
+        return (
+            <div>
+                <HeaderBar title={form.name} description={form.description}/>
+                <div css={[unselectable, containerStyles]}>
+                    <h3 css={thanksStyle}>Thanks for your response!</h3>
+                    <div className={ "return_button closed" }>
+                        <Link to="/" css={returnStyles}>Return Home</Link>
+                    </div>
+                    <br css={separatorStyles}/>
+                </div>
+            </div>
+        );
+    }
+
+    if (sending) {
+        return (
+            <div>
+                <HeaderBar title={"Submitting..."}/>
+                <div css={{display: "flex", justifyContent: "center", paddingTop: "40px"}}>
+                    <PropagateLoader color="white"/>
+                </div>
+            </div>
+        );
+    }
+
     if (!form) {
         return <Loading/>;
     }
@@ -198,6 +169,8 @@ function FormPage(): JSX.Element {
             return;
         }
 
+        setSending(true);
+
         const answers = {};
         questions.forEach(prop => {
             const question = prop.props.question;
@@ -233,6 +206,8 @@ function FormPage(): JSX.Element {
         });
 
         await ApiClient.post(`forms/submit/${id}`, {response: answers});
+        setSending(false);
+        setSent(true);
     }
 
     const open: boolean = form.features.includes(FormFeatures.Open);
-- 
cgit v1.2.3


From 16d3445de6900303474ddf9f6789f310df121ea5 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Thu, 21 Jan 2021 14:33:19 +0200
Subject: Add submitted_text field to form

---
 src/api/forms.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/api/forms.ts b/src/api/forms.ts
index 12b9abf..77fbb8e 100644
--- a/src/api/forms.ts
+++ b/src/api/forms.ts
@@ -16,7 +16,8 @@ export interface Form {
     webhook: WebHook | null,
     questions: Array<Question>,
     name: string,
-    description: string
+    description: string,
+    submitted_text: string | null
 }
 
 export interface WebHook {
-- 
cgit v1.2.3


From 449a56d91e7208b057a0a5165fbbc2bfadd33ba6 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Thu, 21 Jan 2021 14:34:53 +0200
Subject: Implement dynamic showing of form submitted text

---
 src/commonStyles.tsx   | 2 +-
 src/pages/FormPage.tsx | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx
index 3ff2a2f..cbfc40a 100644
--- a/src/commonStyles.tsx
+++ b/src/commonStyles.tsx
@@ -66,7 +66,6 @@ const containerStyles = css`
 
   text-align: center;
   font-size: 1.5rem;
-  white-space: nowrap;
 
   > div {
     display: inline-block;
@@ -109,6 +108,7 @@ const returnStyles = css`
 
   color: white;
   text-decoration: none;
+  white-space: nowrap;
 
   background-color: ${colors.greyple};
   transition: background-color 300ms;
diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index cf6947b..72b073f 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -29,6 +29,7 @@ interface NavigationProps {
 class Navigation extends React.Component<NavigationProps> {
     submitStyles = css`
       text-align: right;
+      white-space: nowrap;
 
       button {
         padding: 0.5rem 4rem;
@@ -110,12 +111,13 @@ function FormPage(): JSX.Element {
     }, []);
 
     if (form && sent) {
-        const thanksStyle = css`font-family: "Uni Sans", "Hind", "Arial", sans-serif;`;
+        const thanksStyle = css`font-family: "Uni Sans", "Hind", "Arial", sans-serif; margin-top: 250px;`;
+        const divStyle = css`width: 80%;`;
         return (
             <div>
                 <HeaderBar title={form.name} description={form.description}/>
-                <div css={[unselectable, containerStyles]}>
-                    <h3 css={thanksStyle}>Thanks for your response!</h3>
+                <div css={[unselectable, containerStyles, divStyle]}>
+                    <h3 css={thanksStyle}>{form.submitted_text ?? "Thanks for your response!"}</h3>
                     <div className={ "return_button closed" }>
                         <Link to="/" css={returnStyles}>Return Home</Link>
                     </div>
-- 
cgit v1.2.3


From b6dd5e5e57f3e0f16ab6814fc96976e43f8e1f62 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Thu, 21 Jan 2021 19:55:26 +0200
Subject: Add space to union both sides

Co-authored-by: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com>
---
 src/components/ErrorMessage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
index 55e3759..8c315fb 100644
--- a/src/components/ErrorMessage.tsx
+++ b/src/components/ErrorMessage.tsx
@@ -14,7 +14,7 @@ const styles = css`
   margin: 15px 0 0;
 `;
 
-export default function ErrorMessage(props: ErrorMessageProps): JSX.Element|null {
+export default function ErrorMessage(props: ErrorMessageProps): JSX.Element | null {
     if (!props.show) {
         return null;
     }
-- 
cgit v1.2.3


From 64205b4e08c3a9decee2c2c1ba2fd80794f396b2 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Thu, 21 Jan 2021 19:56:18 +0200
Subject: Remove unnecessary ESLint disable

---
 src/components/Question.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Question.tsx b/src/components/Question.tsx
index 750dd64..25ce04d 100644
--- a/src/components/Question.tsx
+++ b/src/components/Question.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
 /** @jsx jsx */
 import { jsx, css } from "@emotion/react";
 import React, { ChangeEvent, FocusEvent } from "react";
-- 
cgit v1.2.3


From 8d3469e69d1030b5d83108c6e967bffbb9e1d9a9 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Thu, 21 Jan 2021 20:13:51 +0200
Subject: Use relative units

---
 src/commonStyles.tsx            | 4 ++--
 src/components/ErrorMessage.tsx | 6 +++---
 src/pages/FormPage.tsx          | 3 ++-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx
index cbfc40a..2caa77e 100644
--- a/src/commonStyles.tsx
+++ b/src/commonStyles.tsx
@@ -54,8 +54,8 @@ const textInputs = css`
 const invalidStyles = css`
   .invalid-box {
     -webkit-appearance: none;
-    -webkit-box-shadow: 0 0 10px ${colors.error};
-    box-shadow: 0 0 10px ${colors.error};
+    -webkit-box-shadow: 0 0 0.6rem ${colors.error};
+    box-shadow: 0 0 0.6rem ${colors.error};
     border: none;
   }
 `;
diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
index 55e3759..1cf3cbc 100644
--- a/src/components/ErrorMessage.tsx
+++ b/src/components/ErrorMessage.tsx
@@ -9,9 +9,9 @@ interface ErrorMessageProps {
 
 const styles = css`
   color: ${colors.error};
-  font-size: 18px;
-  line-height: 15px;
-  margin: 15px 0 0;
+  font-size: 1.15rem;
+  line-height: 1.1rem;
+  margin: 1rem 0 0;
 `;
 
 export default function ErrorMessage(props: ErrorMessageProps): JSX.Element|null {
diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index 72b073f..21303ab 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -107,11 +107,12 @@ function FormPage(): JSX.Element {
     useEffect(() => {
         getForm(id).then(form => {
             setForm(form);
+            setSent(true);
         });
     }, []);
 
     if (form && sent) {
-        const thanksStyle = css`font-family: "Uni Sans", "Hind", "Arial", sans-serif; margin-top: 250px;`;
+        const thanksStyle = css`font-family: "Uni Sans", "Hind", "Arial", sans-serif; margin-top: 15.5rem;`;
         const divStyle = css`width: 80%;`;
         return (
             <div>
-- 
cgit v1.2.3


From 646469028115dd7005e2a4427d55adc9f4150aa4 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Sat, 23 Jan 2021 15:38:11 +0200
Subject: Remove debugging setSent

---
 src/pages/FormPage.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index 21303ab..36ca86f 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -107,7 +107,6 @@ function FormPage(): JSX.Element {
     useEffect(() => {
         getForm(id).then(form => {
             setForm(form);
-            setSent(true);
         });
     }, []);
 
-- 
cgit v1.2.3


From e221e20a82411dabc4d6c21172f0c68badc64364 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Thu, 28 Jan 2021 19:31:25 +0200
Subject: Remove unnecessary separator from sent form return home button

---
 src/commonStyles.tsx   | 10 ----------
 src/pages/FormPage.tsx | 12 ++++++++++--
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx
index 2caa77e..1136b34 100644
--- a/src/commonStyles.tsx
+++ b/src/commonStyles.tsx
@@ -93,15 +93,6 @@ const containerStyles = css`
   }
 `;
 
-const separatorStyles = css`
-  height: 0;
-  display: none;
-
-  @media (max-width: 850px) {
-    display: block;
-  }
-`;
-
 const returnStyles = css`
   padding: 0.5rem 2rem;
   border-radius: 8px;
@@ -126,6 +117,5 @@ export {
     textInputs,
     invalidStyles,
     containerStyles,
-    separatorStyles,
     returnStyles
 };
diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index 36ca86f..abb008f 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -13,7 +13,7 @@ import ScrollToTop from "../components/ScrollToTop";
 
 import { Form, FormFeatures, getForm } from "../api/forms";
 import colors from "../colors";
-import { unselectable, containerStyles, separatorStyles, returnStyles }  from "../commonStyles";
+import { unselectable, containerStyles, returnStyles }  from "../commonStyles";
 import { Question, QuestionType } from "../api/question";
 import ApiClient from "../api/client";
 
@@ -27,6 +27,15 @@ interface NavigationProps {
 }
 
 class Navigation extends React.Component<NavigationProps> {
+    separatorStyles = css`
+      height: 0;
+      display: none;
+
+      @media (max-width: 850px) {
+        display: block;
+      }
+    `;
+
     submitStyles = css`
       text-align: right;
       white-space: nowrap;
@@ -121,7 +130,6 @@ function FormPage(): JSX.Element {
                     <div className={ "return_button closed" }>
                         <Link to="/" css={returnStyles}>Return Home</Link>
                     </div>
-                    <br css={separatorStyles}/>
                 </div>
             </div>
         );
-- 
cgit v1.2.3


From 978754f9bc81d0d836ddea6656af4a3dadce5248 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Thu, 28 Jan 2021 19:34:15 +0200
Subject: Move container and return styles back to FormPage

---
 src/commonStyles.tsx   | 53 +-------------------------------------------------
 src/pages/FormPage.tsx | 52 +++++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 51 insertions(+), 54 deletions(-)

diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx
index 1136b34..57002a9 100644
--- a/src/commonStyles.tsx
+++ b/src/commonStyles.tsx
@@ -60,62 +60,11 @@ const invalidStyles = css`
   }
 `;
 
-const containerStyles = css`
-  margin: auto;
-  width: 50%;
-
-  text-align: center;
-  font-size: 1.5rem;
-
-  > div {
-    display: inline-block;
-    margin: 2rem auto;
-    width: 50%;
-  }
-
-  @media (max-width: 850px) {
-    width: 100%;
-
-    > div {
-      display: flex;
-      justify-content: center;
-
-      margin: 0 auto;
-    }
-  }
-
-  .return_button {
-    text-align: left;
-  }
-
-  .return_button.closed {
-    text-align: center;
-  }
-`;
-
-const returnStyles = css`
-  padding: 0.5rem 2rem;
-  border-radius: 8px;
-
-  color: white;
-  text-decoration: none;
-  white-space: nowrap;
-
-  background-color: ${colors.greyple};
-  transition: background-color 300ms;
-
-  :hover {
-    background-color: ${colors.darkerGreyple};
-  }
-`;
-
 export {
     selectable,
     unselectable,
     hiddenInput,
     multiSelectInput,
     textInputs,
-    invalidStyles,
-    containerStyles,
-    returnStyles
+    invalidStyles
 };
diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index abb008f..de80e8a 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -13,10 +13,58 @@ import ScrollToTop from "../components/ScrollToTop";
 
 import { Form, FormFeatures, getForm } from "../api/forms";
 import colors from "../colors";
-import { unselectable, containerStyles, returnStyles }  from "../commonStyles";
+import { unselectable }  from "../commonStyles";
 import { Question, QuestionType } from "../api/question";
 import ApiClient from "../api/client";
 
+const containerStyles = css`
+  margin: auto;
+  width: 50%;
+
+  text-align: center;
+  font-size: 1.5rem;
+
+  > div {
+    display: inline-block;
+    margin: 2rem auto;
+    width: 50%;
+  }
+
+  @media (max-width: 850px) {
+    width: 100%;
+
+    > div {
+      display: flex;
+      justify-content: center;
+
+      margin: 0 auto;
+    }
+  }
+
+  .return_button {
+    text-align: left;
+  }
+
+  .return_button.closed {
+    text-align: center;
+  }
+`;
+
+const returnStyles = css`
+  padding: 0.5rem 2rem;
+  border-radius: 8px;
+
+  color: white;
+  text-decoration: none;
+  white-space: nowrap;
+
+  background-color: ${colors.greyple};
+  transition: background-color 300ms;
+
+  :hover {
+    background-color: ${colors.darkerGreyple};
+  }
+`;
 
 interface PathParams {
     id: string
@@ -74,7 +122,7 @@ class Navigation extends React.Component<NavigationProps> {
                 <div className={ "return_button" + (this.props.form_state ? "" : " closed") }>
                     <Link to="/" css={returnStyles}>Return Home</Link>
                 </div>
-                <br css={separatorStyles}/>
+                <br css={this.separatorStyles}/>
                 { submit }
             </div>
         );
-- 
cgit v1.2.3


From bdb8ed5d9a03ec4e0abbc23d209d0f0017d3413f Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Fri, 5 Feb 2021 17:38:05 +0200
Subject: Use border-color: transparent instead border: none

---
 src/commonStyles.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx
index 57002a9..b2969f8 100644
--- a/src/commonStyles.tsx
+++ b/src/commonStyles.tsx
@@ -56,7 +56,7 @@ const invalidStyles = css`
     -webkit-appearance: none;
     -webkit-box-shadow: 0 0 0.6rem ${colors.error};
     box-shadow: 0 0 0.6rem ${colors.error};
-    border: none;
+    border-color: transparent;
   }
 `;
 
-- 
cgit v1.2.3


From 6c88ec320843b1cfa461539c77592251db7d06cb Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Fri, 5 Feb 2021 17:41:15 +0200
Subject: Toggle visibility instead returning null when no error should be
 shown

---
 src/components/ErrorMessage.tsx | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
index 982bdb9..3342434 100644
--- a/src/components/ErrorMessage.tsx
+++ b/src/components/ErrorMessage.tsx
@@ -7,17 +7,14 @@ interface ErrorMessageProps {
     message: string
 }
 
-const styles = css`
-  color: ${colors.error};
-  font-size: 1.15rem;
-  line-height: 1.1rem;
-  margin: 1rem 0 0;
-`;
-
 export default function ErrorMessage(props: ErrorMessageProps): JSX.Element | null {
-    if (!props.show) {
-        return null;
-    }
+    const styles = css`
+      color: ${colors.error};
+      font-size: 1.15rem;
+      line-height: 1.1rem;
+      margin: 1rem 0 0;
+      visibilty: ${props.show ? "visible" : "hidden"}
+    `;
 
     return (
         <p css={styles}>{props.message}</p>
-- 
cgit v1.2.3


From 39fe1ece1366c70f2d139a7a8bec9eec2c41d1da Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 8 Feb 2021 16:23:55 +0200
Subject: Use public state instead of event value for compability

---
 src/components/InputTypes/index.tsx |  4 ++--
 src/components/Question.tsx         | 22 +++-------------------
 2 files changed, 5 insertions(+), 21 deletions(-)

diff --git a/src/components/InputTypes/index.tsx b/src/components/InputTypes/index.tsx
index 04c992b..2b348e0 100644
--- a/src/components/InputTypes/index.tsx
+++ b/src/components/InputTypes/index.tsx
@@ -6,7 +6,7 @@ import Select from "./Select";
 import ShortText from "./ShortText";
 import TextArea from "./TextArea";
 
-import React, { ChangeEvent, FocusEvent } from "react";
+import React, { ChangeEvent } from "react";
 
 import { QuestionType } from "../../api/question";
 import { QuestionProp } from "../Question";
@@ -18,7 +18,7 @@ const require_options: Array<QuestionType> = [
     QuestionType.Range
 ];
 
-export default function create_input({ question, public_state }: QuestionProp, handler: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void, blurHandler: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLDivElement>) => void): JSX.Element | JSX.Element[] {
+export default function create_input({ question, public_state }: QuestionProp, handler: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void, blurHandler: () => void): JSX.Element | JSX.Element[] {
     let result: JSX.Element | JSX.Element[];
 
     // eslint-disable-next-line
diff --git a/src/components/Question.tsx b/src/components/Question.tsx
index 25ce04d..567da2c 100644
--- a/src/components/Question.tsx
+++ b/src/components/Question.tsx
@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { jsx, css } from "@emotion/react";
-import React, { ChangeEvent, FocusEvent } from "react";
+import React, { ChangeEvent } from "react";
 
 import { Question, QuestionType } from "../api/question";
 import { selectable } from "../commonStyles";
@@ -47,25 +47,9 @@ class RenderedQuestion extends React.Component<QuestionProp> {
     // This is here to allow dynamic selection between the general handler, and the textarea handler.
     handler(_: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void {} // eslint-disable-line
 
-    blurHandler(event: FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLDivElement>): void {
+    blurHandler(): void {
         if (this.props.question.required) {
-            let invalid = false;
-            switch (this.props.question.type) {
-                case QuestionType.ShortText:   
-                case QuestionType.TextArea:
-                    if (event.target.value === "") {
-                        invalid = true;
-                    }
-                    break;
-                
-                case QuestionType.Select:
-                    if (!this.props.public_state.get("value")) {
-                        invalid = true;
-                    }
-                    break;
-            }
-
-            if (invalid) {
+            if (!this.props.public_state.get("value")) {
                 this.setPublicState("error", "Field must be filled.");
                 this.setPublicState("valid", false);
             } else {
-- 
cgit v1.2.3


From ff1e4bc4d37fb55aeb5b33cbb8b4f640e9fc745e Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 8 Feb 2021 16:31:29 +0200
Subject: Improve and simplify checkboxes gathering

Co-authored-by: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com>
---
 src/pages/FormPage.tsx | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index de80e8a..b8518c0 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -244,19 +244,18 @@ function FormPage(): JSX.Element {
                     answers[question.id] = "";
                     break;
 
-                case QuestionType.Checkbox:
-                    if (typeof options !== "string") {
-                        const keys: Map<string, string> = new Map();
-                        options.forEach((val, index) => {
-                            keys.set(val, `${("000" + index).slice(-4)}. ${val}`);
-                        });
-                        const pairs = {};
-                        keys.forEach((val, key) => {
-                            pairs[key] = !!prop.props.public_state.get(val);
-                        });
-                        answers[question.id] = pairs;
-                    }
+                case QuestionType.Checkbox: {
+                    const parsed = new Map();
+
+                    prop.props.public_state.forEach((value, key) => {
+                        if (key !== "valid" && key !== "error") {
+                            answers.set(key.slice(6), value);
+                        }
+                    });
+
+                    answers[question.id] = parsed;
                     break;
+                }
 
                 default:
                     answers[question.id] = prop.props.public_state.get("value");
-- 
cgit v1.2.3


From c9d423d99a0eb4be2b4cc808ae11e42fc2cd04de Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 8 Feb 2021 16:45:33 +0200
Subject: Simplify if check

---
 src/pages/FormPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index b8518c0..0023db4 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -221,7 +221,7 @@ function FormPage(): JSX.Element {
 
         if (invalidFieldIds.length) {
             const firstErrored = questions[invalidFieldIds[0]];
-            if (firstErrored !== undefined) {
+            if (firstErrored) {
                 firstErrored.props.scroll_ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
             }
             return;
-- 
cgit v1.2.3


From c7711d4d14cfb8bd99ab066bf53ed5ef6efe6a9c Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 8 Feb 2021 16:47:58 +0200
Subject: Add nullability check for ref

---
 src/pages/FormPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index 0023db4..e8d1a4b 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -221,7 +221,7 @@ function FormPage(): JSX.Element {
 
         if (invalidFieldIds.length) {
             const firstErrored = questions[invalidFieldIds[0]];
-            if (firstErrored) {
+            if (firstErrored && firstErrored.props.scroll_ref) {
                 firstErrored.props.scroll_ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
             }
             return;
-- 
cgit v1.2.3


From ee94923ffbe84361d1b8d219a8ed2e1d7a08e6a2 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 8 Feb 2021 17:55:46 +0200
Subject: Improve submit data gathering

---
 src/pages/FormPage.tsx | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index e8d1a4b..ab74be9 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -229,10 +229,9 @@ function FormPage(): JSX.Element {
 
         setSending(true);
 
-        const answers = {};
+        const answers: { [key: string]: unknown } = {};
         questions.forEach(prop => {
-            const question = prop.props.question;
-            const options: string | string[] = prop.props.question.data["options"];
+            const question: Question = prop.props.question;
 
             // TODO: Parse input from each question, and submit
             switch (question.type) {
@@ -240,16 +239,12 @@ function FormPage(): JSX.Element {
                     answers[question.id] = false;
                     break;
 
-                case QuestionType.Code:
-                    answers[question.id] = "";
-                    break;
-
                 case QuestionType.Checkbox: {
-                    const parsed = new Map();
+                    const parsed: { [key: string]: unknown } = {};
 
-                    prop.props.public_state.forEach((value, key) => {
+                    prop.props.public_state.forEach((value: unknown, key: string) => {
                         if (key !== "valid" && key !== "error") {
-                            answers.set(key.slice(6), value);
+                            parsed[key.slice(6)] = value;
                         }
                     });
 
@@ -257,6 +252,7 @@ function FormPage(): JSX.Element {
                     break;
                 }
 
+                case QuestionType.Code:
                 default:
                     answers[question.id] = prop.props.public_state.get("value");
             }
-- 
cgit v1.2.3


From 4cd5c97fa8db2809c796f89062d06eade582ea55 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 8 Feb 2021 18:01:08 +0200
Subject: Rename invalid field IDs variable

---
 src/pages/FormPage.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index ab74be9..8e998c5 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -205,7 +205,7 @@ function FormPage(): JSX.Element {
     async function handleSubmit(event: SyntheticEvent) {
         event.preventDefault();
         // Client-side required validation
-        const invalidFieldIds: number[] = [];
+        const invalidFieldIDs: number[] = [];
         questions.forEach((prop, i) => {
             const question: Question = prop.props.question;
             if (!question.required) {
@@ -215,12 +215,12 @@ function FormPage(): JSX.Element {
             prop.ref.current.validateField();
             // In case when field is invalid, add this to invalid fields list.
             if (prop.props.public_state.get("valid") === false) {
-                invalidFieldIds.push(i);
+                invalidFieldIDs.push(i);
             }
         });
 
-        if (invalidFieldIds.length) {
-            const firstErrored = questions[invalidFieldIds[0]];
+        if (invalidFieldIDs.length) {
+            const firstErrored = questions[invalidFieldIDs[0]];
             if (firstErrored && firstErrored.props.scroll_ref) {
                 firstErrored.props.scroll_ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
             }
-- 
cgit v1.2.3


From 7075e8579e5aa038438be9bbb2ba275d52c20910 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 8 Feb 2021 19:29:37 +0200
Subject: Implement focusing text fields if empty on submit

---
 src/components/InputTypes/ShortText.tsx | 6 ++++--
 src/components/InputTypes/TextArea.tsx  | 6 ++++--
 src/components/InputTypes/index.tsx     | 9 +++++----
 src/components/Question.tsx             | 6 ++++--
 src/pages/FormPage.tsx                  | 6 +++++-
 5 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/InputTypes/ShortText.tsx b/src/components/InputTypes/ShortText.tsx
index 5509a45..12f066e 100644
--- a/src/components/InputTypes/ShortText.tsx
+++ b/src/components/InputTypes/ShortText.tsx
@@ -6,13 +6,15 @@ import { textInputs, invalidStyles } from "../../commonStyles";
 interface ShortTextProps {
     handler: (event: ChangeEvent<HTMLInputElement>) => void,
     blurHandler: (event: FocusEvent<HTMLInputElement>) => void,
-    valid: boolean
+    valid: boolean,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    focus_ref: React.RefObject<any>
 }
 
 export default function ShortText(props: ShortTextProps): JSX.Element {
     return (
         <div css={invalidStyles}>
-            <input type="text" css={textInputs} placeholder="Enter Text..." onChange={props.handler} onBlur={props.blurHandler} className={!props.valid ? "invalid-box" : ""}/>
+            <input type="text" css={textInputs} placeholder="Enter Text..." onChange={props.handler} onBlur={props.blurHandler} className={!props.valid ? "invalid-box" : ""} ref={props.focus_ref}/>
         </div>
     );
 }
diff --git a/src/components/InputTypes/TextArea.tsx b/src/components/InputTypes/TextArea.tsx
index 10dbf10..35afe67 100644
--- a/src/components/InputTypes/TextArea.tsx
+++ b/src/components/InputTypes/TextArea.tsx
@@ -6,7 +6,9 @@ import { invalidStyles, textInputs } from "../../commonStyles";
 interface TextAreaProps {
     handler: (event: ChangeEvent<HTMLTextAreaElement>) => void,
     onBlurHandler: (event: FocusEvent<HTMLTextAreaElement>) => void,
-    valid: boolean
+    valid: boolean,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    focus_ref: React.RefObject<any>
 }
 
 const styles = css`
@@ -21,7 +23,7 @@ const styles = css`
 export default function TextArea(props: TextAreaProps): JSX.Element {
     return (
         <div css={invalidStyles}>
-            <textarea css={[textInputs, styles]} placeholder="Enter Text..." onChange={props.handler} onBlur={props.onBlurHandler} className={!props.valid ? "invalid-box" : ""}/>
+            <textarea css={[textInputs, styles]} 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 2b348e0..cbfbd8c 100644
--- a/src/components/InputTypes/index.tsx
+++ b/src/components/InputTypes/index.tsx
@@ -18,7 +18,8 @@ const require_options: Array<QuestionType> = [
     QuestionType.Range
 ];
 
-export default function create_input({ question, public_state }: QuestionProp, handler: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void, blurHandler: () => void): JSX.Element | JSX.Element[] {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default function create_input({ question, public_state }: QuestionProp, handler: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void, blurHandler: () => void, focus_ref: React.RefObject<any>): JSX.Element | JSX.Element[] {
     let result: JSX.Element | JSX.Element[];
 
     // eslint-disable-next-line
@@ -38,7 +39,7 @@ export default function create_input({ question, public_state }: QuestionProp, h
     /* eslint-disable react/react-in-jsx-scope */
     switch (question.type) {
         case QuestionType.TextArea:
-            result = <TextArea handler={handler} valid={valid} onBlurHandler={blurHandler}/>;
+            result = <TextArea handler={handler} valid={valid} onBlurHandler={blurHandler} focus_ref={focus_ref}/>;
             break;
 
         case QuestionType.Checkbox:
@@ -54,7 +55,7 @@ export default function create_input({ question, public_state }: QuestionProp, h
             break;
 
         case QuestionType.ShortText:
-            result = <ShortText handler={handler} blurHandler={blurHandler} valid={valid}/>;
+            result = <ShortText handler={handler} blurHandler={blurHandler} valid={valid} focus_ref={focus_ref}/>;
             break;
 
         case QuestionType.Range:
@@ -67,7 +68,7 @@ export default function create_input({ question, public_state }: QuestionProp, h
             break;
 
         default:
-            result = <TextArea handler={handler} valid={valid} onBlurHandler={blurHandler}/>;
+            result = <TextArea handler={handler} valid={valid} onBlurHandler={blurHandler} focus_ref={focus_ref}/>;
     }
     /* eslint-enable react/react-in-jsx-scope */
 
diff --git a/src/components/Question.tsx b/src/components/Question.tsx
index 567da2c..e619a45 100644
--- a/src/components/Question.tsx
+++ b/src/components/Question.tsx
@@ -18,7 +18,9 @@ const skip_normal_state: Array<QuestionType> = [
 export type QuestionProp = {
     question: Question,
     public_state: Map<string, string | boolean | null>,
-    scroll_ref: React.RefObject<HTMLDivElement>
+    scroll_ref: React.RefObject<HTMLDivElement>,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    focus_ref: React.RefObject<any>
 }
 
 class RenderedQuestion extends React.Component<QuestionProp> {
@@ -256,7 +258,7 @@ class RenderedQuestion extends React.Component<QuestionProp> {
                 <h2 css={[selectable, requiredStarStyles]}>
                     {question.name}<span className={question.required ? "required" : ""}>*</span>
                 </h2>
-                { create_input(this.props, this.handler, this.blurHandler) }
+                { create_input(this.props, this.handler, this.blurHandler, this.props.focus_ref) }
                 <ErrorMessage show={!valid} message={error} />
                 <hr css={css`color: gray; margin: 3rem 0;`}/>
             </div>;
diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index 8e998c5..50f48ba 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -199,7 +199,8 @@ function FormPage(): JSX.Element {
     }
 
     const questions = form.questions.map((question, index) => {
-        return <RenderedQuestion ref={createRef<RenderedQuestion>()} scroll_ref={createRef<HTMLDivElement>()} question={question} public_state={new Map()} key={index + Date.now()}/>;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return <RenderedQuestion ref={createRef<RenderedQuestion>()} focus_ref={createRef<any>()} scroll_ref={createRef<HTMLDivElement>()} question={question} public_state={new Map()} key={index + Date.now()}/>;
     });
 
     async function handleSubmit(event: SyntheticEvent) {
@@ -223,6 +224,9 @@ function FormPage(): JSX.Element {
             const firstErrored = questions[invalidFieldIDs[0]];
             if (firstErrored && firstErrored.props.scroll_ref) {
                 firstErrored.props.scroll_ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
+                if (firstErrored.props.focus_ref && firstErrored.props.focus_ref.current) {
+                    firstErrored.props.focus_ref.current.focus({ preventScroll: true });
+                }
             }
             return;
         }
-- 
cgit v1.2.3


From da34ee3a362c04a52ea4c0d1f8e353aec8ab34ab Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 8 Feb 2021 19:35:57 +0200
Subject: Create refMap to avoid errors on direct ref access

---
 src/pages/FormPage.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index 50f48ba..7798be6 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -197,10 +197,13 @@ function FormPage(): JSX.Element {
     if (!form) {
         return <Loading/>;
     }
-
+    
+    const refMap: Map<string, React.RefObject<RenderedQuestion>> = new Map();
     const questions = form.questions.map((question, index) => {
+        const questionRef = createRef<RenderedQuestion>();
+        refMap.set(question.id, questionRef);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return <RenderedQuestion ref={createRef<RenderedQuestion>()} focus_ref={createRef<any>()} scroll_ref={createRef<HTMLDivElement>()} question={question} public_state={new Map()} key={index + Date.now()}/>;
+        return <RenderedQuestion ref={questionRef} focus_ref={createRef<any>()} scroll_ref={createRef<HTMLDivElement>()} question={question} public_state={new Map()} key={index + Date.now()}/>;
     });
 
     async function handleSubmit(event: SyntheticEvent) {
@@ -213,7 +216,10 @@ function FormPage(): JSX.Element {
                 return;
             }
 
-            prop.ref.current.validateField();
+            const questionRef = refMap.get(question.id);
+            if (questionRef && questionRef.current) {
+                questionRef.current.validateField();
+            }
             // In case when field is invalid, add this to invalid fields list.
             if (prop.props.public_state.get("valid") === false) {
                 invalidFieldIDs.push(i);
-- 
cgit v1.2.3


From 20a1d2dfb810cdbed70514d3917e95ef620cfc78 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 8 Feb 2021 19:50:25 +0200
Subject: Remove trailing whitespaces

---
 src/components/Question.tsx | 6 +++---
 src/pages/FormPage.tsx      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Question.tsx b/src/components/Question.tsx
index e619a45..9a15a07 100644
--- a/src/components/Question.tsx
+++ b/src/components/Question.tsx
@@ -99,7 +99,7 @@ class RenderedQuestion extends React.Component<QuestionProp> {
             case "text":
                 this.setPublicState("valid", true);
                 break;
-            
+
             case "checkbox":
                 // We need to check this here, because checkbox doesn't have onBlur
                 if (this.props.question.required && typeof options !== "string") {
@@ -135,13 +135,13 @@ class RenderedQuestion extends React.Component<QuestionProp> {
         let invalid = false;
         const options: string | string[] = this.props.question.data["options"];
         switch (this.props.question.type) {
-            case QuestionType.TextArea:    
+            case QuestionType.TextArea:
             case QuestionType.ShortText:
                 if (this.props.public_state.get("value") === "") {
                     invalid = true;
                 }
                 break;
-            
+
             case QuestionType.Select:
             case QuestionType.Range:
             case QuestionType.Radio:
diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index 7798be6..f0fb548 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -197,7 +197,7 @@ function FormPage(): JSX.Element {
     if (!form) {
         return <Loading/>;
     }
-    
+
     const refMap: Map<string, React.RefObject<RenderedQuestion>> = new Map();
     const questions = form.questions.map((question, index) => {
         const questionRef = createRef<RenderedQuestion>();
-- 
cgit v1.2.3


From 32319542b26c5f7c05a9c66389be42cb0b998f41 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 8 Feb 2021 21:55:41 +0200
Subject: Fix CSS visibilty attribute

Co-authored-by: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com>
---
 src/components/ErrorMessage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
index 3342434..165f399 100644
--- a/src/components/ErrorMessage.tsx
+++ b/src/components/ErrorMessage.tsx
@@ -13,7 +13,7 @@ export default function ErrorMessage(props: ErrorMessageProps): JSX.Element | nu
       font-size: 1.15rem;
       line-height: 1.1rem;
       margin: 1rem 0 0;
-      visibilty: ${props.show ? "visible" : "hidden"}
+      visibility: ${props.show ? "visible" : "hidden"};
     `;
 
     return (
-- 
cgit v1.2.3


From 128bb2a518d3322eeef0b7f3fc661aebb9791097 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 8 Feb 2021 22:03:28 +0200
Subject: Set z-index and position for error message CSS

---
 src/components/ErrorMessage.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
index 165f399..650100d 100644
--- a/src/components/ErrorMessage.tsx
+++ b/src/components/ErrorMessage.tsx
@@ -14,6 +14,8 @@ export default function ErrorMessage(props: ErrorMessageProps): JSX.Element | nu
       line-height: 1.1rem;
       margin: 1rem 0 0;
       visibility: ${props.show ? "visible" : "hidden"};
+      position: absolute;
+      z-index: -1;
     `;
 
     return (
-- 
cgit v1.2.3


From 6e550347bcebeb42b193d7ebb7e8018aabb97c90 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 8 Feb 2021 22:07:29 +0200
Subject: Change ShortText blur handler name

---
 src/components/InputTypes/ShortText.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/InputTypes/ShortText.tsx b/src/components/InputTypes/ShortText.tsx
index 12f066e..dbf14ad 100644
--- a/src/components/InputTypes/ShortText.tsx
+++ b/src/components/InputTypes/ShortText.tsx
@@ -5,7 +5,7 @@ import { textInputs, invalidStyles } from "../../commonStyles";
 
 interface ShortTextProps {
     handler: (event: ChangeEvent<HTMLInputElement>) => void,
-    blurHandler: (event: FocusEvent<HTMLInputElement>) => void,
+    onBlurHandler: (event: FocusEvent<HTMLInputElement>) => void,
     valid: boolean,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     focus_ref: React.RefObject<any>
@@ -14,7 +14,7 @@ interface ShortTextProps {
 export default function ShortText(props: ShortTextProps): JSX.Element {
     return (
         <div css={invalidStyles}>
-            <input type="text" css={textInputs} placeholder="Enter Text..." onChange={props.handler} onBlur={props.blurHandler} className={!props.valid ? "invalid-box" : ""} ref={props.focus_ref}/>
+            <input type="text" css={textInputs} placeholder="Enter Text..." onChange={props.handler} onBlur={props.onBlurHandler} className={!props.valid ? "invalid-box" : ""} ref={props.focus_ref}/>
         </div>
     );
 }
-- 
cgit v1.2.3


From 97fcbf52ec96445c2c691aa2a03b006f428eaed9 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 8 Feb 2021 22:09:38 +0200
Subject: Change blur handler name in Select

---
 src/components/InputTypes/Select.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/InputTypes/Select.tsx b/src/components/InputTypes/Select.tsx
index f0d13d3..5652b99 100644
--- a/src/components/InputTypes/Select.tsx
+++ b/src/components/InputTypes/Select.tsx
@@ -7,7 +7,7 @@ interface SelectProps {
     options: Array<string>,
     state_dict: Map<string, string | boolean | null>,
     valid: boolean,
-    handleBlur: (event: React.FocusEvent<HTMLDivElement>) => void
+    onBlurHandler: (event: React.FocusEvent<HTMLDivElement>) => void
 }
 
 const containerStyles = css`
@@ -184,7 +184,7 @@ class Select extends React.Component<SelectProps> {
         const handle_click = (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => this.handle_click(container_ref, selected_option_ref, event);
 
         return (
-            <div css={[containerStyles, arrowStyles, optionContainerStyles, invalidStyles]} ref={container_ref} onBlur={this.props.handleBlur}>
+            <div css={[containerStyles, arrowStyles, optionContainerStyles, invalidStyles]} ref={container_ref} onBlur={this.props.onBlurHandler}>
                 <div css={mainWindowStyles} className={!this.props.valid ? "invalid-box selected_container" : "selected_container"}>
                     <span className="arrow"/>
                     <div tabIndex={0} className="selected_option" ref={selected_option_ref} onMouseDown={handle_click} onKeyDown={handle_click}>...</div>
-- 
cgit v1.2.3


From 21659a4b83af5c5f83b0e737615e378ad602732e Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 8 Feb 2021 22:13:10 +0200
Subject: Make all blur handler names matching

---
 src/components/InputTypes/index.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/InputTypes/index.tsx b/src/components/InputTypes/index.tsx
index cbfbd8c..3d7444f 100644
--- a/src/components/InputTypes/index.tsx
+++ b/src/components/InputTypes/index.tsx
@@ -19,7 +19,7 @@ const require_options: Array<QuestionType> = [
 ];
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export default function create_input({ question, public_state }: QuestionProp, handler: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void, blurHandler: () => void, focus_ref: React.RefObject<any>): JSX.Element | JSX.Element[] {
+export default function create_input({ question, public_state }: QuestionProp, handler: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void, onBlurHandler: () => void, focus_ref: React.RefObject<any>): JSX.Element | JSX.Element[] {
     let result: JSX.Element | JSX.Element[];
 
     // eslint-disable-next-line
@@ -39,7 +39,7 @@ export default function create_input({ question, public_state }: QuestionProp, h
     /* eslint-disable react/react-in-jsx-scope */
     switch (question.type) {
         case QuestionType.TextArea:
-            result = <TextArea handler={handler} valid={valid} onBlurHandler={blurHandler} focus_ref={focus_ref}/>;
+            result = <TextArea handler={handler} valid={valid} onBlurHandler={onBlurHandler} focus_ref={focus_ref}/>;
             break;
 
         case QuestionType.Checkbox:
@@ -51,11 +51,11 @@ export default function create_input({ question, public_state }: QuestionProp, h
             break;
 
         case QuestionType.Select:
-            result = <Select options={options} state_dict={public_state} valid={valid} handleBlur={blurHandler}/>;
+            result = <Select options={options} state_dict={public_state} valid={valid} onBlurHandler={onBlurHandler}/>;
             break;
 
         case QuestionType.ShortText:
-            result = <ShortText handler={handler} blurHandler={blurHandler} valid={valid} focus_ref={focus_ref}/>;
+            result = <ShortText handler={handler} onBlurHandler={onBlurHandler} valid={valid} focus_ref={focus_ref}/>;
             break;
 
         case QuestionType.Range:
@@ -68,7 +68,7 @@ export default function create_input({ question, public_state }: QuestionProp, h
             break;
 
         default:
-            result = <TextArea handler={handler} valid={valid} onBlurHandler={blurHandler} focus_ref={focus_ref}/>;
+            result = <TextArea handler={handler} valid={valid} onBlurHandler={onBlurHandler} focus_ref={focus_ref}/>;
     }
     /* eslint-enable react/react-in-jsx-scope */
 
-- 
cgit v1.2.3


From 0e4c5c5b16a96895047b69385436a5596691cf09 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Wed, 17 Feb 2021 15:39:57 +0200
Subject: Unfocus currently focused element before scrolling to invalid
 question

---
 src/pages/FormPage.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index f0fb548..64d21f0 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -229,6 +229,11 @@ function FormPage(): JSX.Element {
         if (invalidFieldIDs.length) {
             const firstErrored = questions[invalidFieldIDs[0]];
             if (firstErrored && firstErrored.props.scroll_ref) {
+                // If any element is already focused, unfocus it to avoid not scrolling behavior.
+                if (document.activeElement && document.activeElement instanceof HTMLElement) {
+                    document.activeElement.blur();
+                }
+
                 firstErrored.props.scroll_ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
                 if (firstErrored.props.focus_ref && firstErrored.props.focus_ref.current) {
                     firstErrored.props.focus_ref.current.focus({ preventScroll: true });
-- 
cgit v1.2.3


From cfc097d66563620f641ff701dbba2b35050a537e Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Wed, 17 Feb 2021 15:57:21 +0200
Subject: Move CSS back under navigation class to avoid messy diff

---
 src/pages/FormPage.tsx | 104 ++++++++++++++++++++++++-------------------------
 1 file changed, 52 insertions(+), 52 deletions(-)

diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index 64d21f0..d5f37f4 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -17,64 +17,48 @@ import { unselectable }  from "../commonStyles";
 import { Question, QuestionType } from "../api/question";
 import ApiClient from "../api/client";
 
-const containerStyles = css`
-  margin: auto;
-  width: 50%;
-
-  text-align: center;
-  font-size: 1.5rem;
-
-  > div {
-    display: inline-block;
-    margin: 2rem auto;
-    width: 50%;
-  }
-
-  @media (max-width: 850px) {
-    width: 100%;
-
-    > div {
-      display: flex;
-      justify-content: center;
+interface PathParams {
+    id: string
+}
 
-      margin: 0 auto;
-    }
-  }
+interface NavigationProps {
+    form_state: boolean  // Whether the form is open or not
+}
 
-  .return_button {
-    text-align: left;
-  }
+class Navigation extends React.Component<NavigationProps> {
+    static containerStyles = css`
+      margin: auto;
+      width: 50%;
 
-  .return_button.closed {
-    text-align: center;
-  }
-`;
+      text-align: center;
+      font-size: 1.5rem;
 
-const returnStyles = css`
-  padding: 0.5rem 2rem;
-  border-radius: 8px;
+      > div {
+        display: inline-block;
+        margin: 2rem auto;
+        width: 50%;
+      }
 
-  color: white;
-  text-decoration: none;
-  white-space: nowrap;
+      @media (max-width: 850px) {
+        width: 100%;
 
-  background-color: ${colors.greyple};
-  transition: background-color 300ms;
+        > div {
+          display: flex;
+          justify-content: center;
 
-  :hover {
-    background-color: ${colors.darkerGreyple};
-  }
-`;
+          margin: 0 auto;
+        }
+      }
 
-interface PathParams {
-    id: string
-}
+      .return_button {
+        text-align: left;
+      }
 
-interface NavigationProps {
-    form_state: boolean  // Whether the form is open or not
-}
+      .return_button.closed {
+        text-align: center;
+      }
+    `;
 
-class Navigation extends React.Component<NavigationProps> {
     separatorStyles = css`
       height: 0;
       display: none;
@@ -84,6 +68,22 @@ class Navigation extends React.Component<NavigationProps> {
       }
     `;
 
+    static returnStyles = css`
+      padding: 0.5rem 2rem;
+      border-radius: 8px;
+
+      color: white;
+      text-decoration: none;
+      white-space: nowrap;
+
+      background-color: ${colors.greyple};
+      transition: background-color 300ms;
+
+      :hover {
+        background-color: ${colors.darkerGreyple};
+      }
+    `;
+
     submitStyles = css`
       text-align: right;
       white-space: nowrap;
@@ -118,9 +118,9 @@ class Navigation extends React.Component<NavigationProps> {
         }
 
         return (
-            <div css={[unselectable, containerStyles]}>
+            <div css={[unselectable, Navigation.containerStyles]}>
                 <div className={ "return_button" + (this.props.form_state ? "" : " closed") }>
-                    <Link to="/" css={returnStyles}>Return Home</Link>
+                    <Link to="/" css={Navigation.returnStyles}>Return Home</Link>
                 </div>
                 <br css={this.separatorStyles}/>
                 { submit }
@@ -173,10 +173,10 @@ function FormPage(): JSX.Element {
         return (
             <div>
                 <HeaderBar title={form.name} description={form.description}/>
-                <div css={[unselectable, containerStyles, divStyle]}>
+                <div css={[unselectable, Navigation.containerStyles, divStyle]}>
                     <h3 css={thanksStyle}>{form.submitted_text ?? "Thanks for your response!"}</h3>
                     <div className={ "return_button closed" }>
-                        <Link to="/" css={returnStyles}>Return Home</Link>
+                        <Link to="/" css={Navigation.returnStyles}>Return Home</Link>
                     </div>
                 </div>
             </div>
-- 
cgit v1.2.3


From 96fccf29bb6a182941e4e5037763bcc833719509 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Wed, 17 Feb 2021 16:17:16 +0200
Subject: Add blur handler to Radio and Range

---
 src/components/InputTypes/Radio.tsx | 5 +++--
 src/components/InputTypes/Range.tsx | 5 +++--
 src/components/InputTypes/index.tsx | 4 ++--
 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:
-- 
cgit v1.2.3


From 66d375b041a5d70a99b83d2101f0417f07457c31 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Thu, 18 Feb 2021 08:10:07 +0200
Subject: Revert change of gathering checkbox values

---
 src/pages/FormPage.tsx | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index d5f37f4..516d937 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -247,6 +247,7 @@ function FormPage(): JSX.Element {
         const answers: { [key: string]: unknown } = {};
         questions.forEach(prop => {
             const question: Question = prop.props.question;
+            const options: string | string[] = question.data["options"];
 
             // TODO: Parse input from each question, and submit
             switch (question.type) {
@@ -255,15 +256,17 @@ function FormPage(): JSX.Element {
                     break;
 
                 case QuestionType.Checkbox: {
-                    const parsed: { [key: string]: unknown } = {};
-
-                    prop.props.public_state.forEach((value: unknown, key: string) => {
-                        if (key !== "valid" && key !== "error") {
-                            parsed[key.slice(6)] = value;
-                        }
-                    });
-
-                    answers[question.id] = parsed;
+                    if (typeof options !== "string") {
+                        const keys: Map<string, string> = new Map();
+                        options.forEach((val: string, index) => {
+                            keys.set(val, `${("000" + index).slice(-4)}. ${val}`);
+                        });
+                        const pairs: { [key: string]: boolean } = { };
+                        keys.forEach((val, key) => {
+                            pairs[key] = !!prop.props.public_state.get(val);
+                        });
+                        answers[question.id] = pairs;
+                    }
                     break;
                 }
 
-- 
cgit v1.2.3


From bc9d7b91aa5992d2634dc9c4c88b8d9ec9e383e5 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Thu, 18 Feb 2021 08:45:30 +0200
Subject: Mark range and radio valid after change

---
 src/components/Question.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/Question.tsx b/src/components/Question.tsx
index 9a15a07..0af745e 100644
--- a/src/components/Question.tsx
+++ b/src/components/Question.tsx
@@ -116,6 +116,11 @@ class RenderedQuestion extends React.Component<QuestionProp> {
                     }
                 }
                 break;
+
+            case "radio":
+                this.setPublicState("valid", true);
+                this.setPublicState("error", "");
+                break;
         }
     }
 
-- 
cgit v1.2.3


From dae3f998decac4c8cafa2607b87678d97e03d99b Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Thu, 18 Feb 2021 09:00:05 +0200
Subject: Remove unnecessary parameters from blur handler type annotations

---
 src/components/InputTypes/Select.tsx    | 2 +-
 src/components/InputTypes/ShortText.tsx | 4 ++--
 src/components/InputTypes/TextArea.tsx  | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/InputTypes/Select.tsx b/src/components/InputTypes/Select.tsx
index 5652b99..69b7168 100644
--- a/src/components/InputTypes/Select.tsx
+++ b/src/components/InputTypes/Select.tsx
@@ -7,7 +7,7 @@ interface SelectProps {
     options: Array<string>,
     state_dict: Map<string, string | boolean | null>,
     valid: boolean,
-    onBlurHandler: (event: React.FocusEvent<HTMLDivElement>) => void
+    onBlurHandler: () => void
 }
 
 const containerStyles = css`
diff --git a/src/components/InputTypes/ShortText.tsx b/src/components/InputTypes/ShortText.tsx
index dbf14ad..8d99dc6 100644
--- a/src/components/InputTypes/ShortText.tsx
+++ b/src/components/InputTypes/ShortText.tsx
@@ -1,11 +1,11 @@
 /** @jsx jsx */
 import { jsx } from "@emotion/react";
-import React, { ChangeEvent, FocusEvent } from "react";
+import React, { ChangeEvent } from "react";
 import { textInputs, invalidStyles } from "../../commonStyles";
 
 interface ShortTextProps {
     handler: (event: ChangeEvent<HTMLInputElement>) => void,
-    onBlurHandler: (event: FocusEvent<HTMLInputElement>) => void,
+    onBlurHandler: () => void,
     valid: boolean,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     focus_ref: React.RefObject<any>
diff --git a/src/components/InputTypes/TextArea.tsx b/src/components/InputTypes/TextArea.tsx
index 35afe67..08424fb 100644
--- a/src/components/InputTypes/TextArea.tsx
+++ b/src/components/InputTypes/TextArea.tsx
@@ -1,11 +1,11 @@
 /** @jsx jsx */
 import { jsx, css } from "@emotion/react";
-import React, { ChangeEvent, FocusEvent } from "react";
+import React, { ChangeEvent } from "react";
 import { invalidStyles, textInputs } from "../../commonStyles";
 
 interface TextAreaProps {
     handler: (event: ChangeEvent<HTMLTextAreaElement>) => void,
-    onBlurHandler: (event: FocusEvent<HTMLTextAreaElement>) => void,
+    onBlurHandler: () => void,
     valid: boolean,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     focus_ref: React.RefObject<any>
-- 
cgit v1.2.3


From e101ca0b52bd1f405698d1f322b3abbcb13c0c07 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Thu, 18 Feb 2021 09:06:14 +0200
Subject: Add focus handler for select (thanks Scaleios)

---
 src/components/InputTypes/Select.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/InputTypes/Select.tsx b/src/components/InputTypes/Select.tsx
index 69b7168..e01b2e9 100644
--- a/src/components/InputTypes/Select.tsx
+++ b/src/components/InputTypes/Select.tsx
@@ -177,6 +177,12 @@ class Select extends React.Component<SelectProps> {
         }
     }
 
+    focusOption(): void {
+        this.props.state_dict.set("value", "temporary");
+        this.props.onBlurHandler();
+        this.props.state_dict.set("value", null);
+    }
+
     render(): JSX.Element {
         const container_ref: React.RefObject<HTMLDivElement> = React.createRef();
         const selected_option_ref: React.RefObject<HTMLDivElement> = React.createRef();
@@ -184,7 +190,7 @@ class Select extends React.Component<SelectProps> {
         const handle_click = (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => this.handle_click(container_ref, selected_option_ref, event);
 
         return (
-            <div css={[containerStyles, arrowStyles, optionContainerStyles, invalidStyles]} ref={container_ref} onBlur={this.props.onBlurHandler}>
+            <div css={[containerStyles, arrowStyles, optionContainerStyles, invalidStyles]} onFocus={this.focusOption.bind(this)} ref={container_ref} onBlur={this.props.onBlurHandler}>
                 <div css={mainWindowStyles} className={!this.props.valid ? "invalid-box selected_container" : "selected_container"}>
                     <span className="arrow"/>
                     <div tabIndex={0} className="selected_option" ref={selected_option_ref} onMouseDown={handle_click} onKeyDown={handle_click}>...</div>
-- 
cgit v1.2.3


From 6ae1bb7a5de86dca3a8452eb93f00bd5bd6f8e1b Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:40:45 +0200
Subject: Don't overwrite user selection

---
 src/components/InputTypes/Select.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/InputTypes/Select.tsx b/src/components/InputTypes/Select.tsx
index e01b2e9..2d0187a 100644
--- a/src/components/InputTypes/Select.tsx
+++ b/src/components/InputTypes/Select.tsx
@@ -178,9 +178,11 @@ class Select extends React.Component<SelectProps> {
     }
 
     focusOption(): void {
-        this.props.state_dict.set("value", "temporary");
-        this.props.onBlurHandler();
-        this.props.state_dict.set("value", null);
+        if (!this.props.state_dict.get("value")) {
+            this.props.state_dict.set("value", "temporary");
+            this.props.onBlurHandler();
+            this.props.state_dict.set("value", null);
+        }
     }
 
     render(): JSX.Element {
-- 
cgit v1.2.3


From 51cbd6c1b78e2a92e25e31d2a00725d5af4a08c7 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Thu, 18 Feb 2021 11:49:48 +0200
Subject: Remove TODO

---
 src/pages/FormPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index 516d937..1e331b9 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -249,7 +249,7 @@ function FormPage(): JSX.Element {
             const question: Question = prop.props.question;
             const options: string | string[] = question.data["options"];
 
-            // TODO: Parse input from each question, and submit
+            // Parse input from each question
             switch (question.type) {
                 case QuestionType.Section:
                     answers[question.id] = false;
-- 
cgit v1.2.3