Implement Select field required check

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.");