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(-) (limited to 'src') 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, state_dict: Map, - required: boolean + required: boolean, + handleBlur: (event: React.FocusEvent) => void } const containerStyles = css` @@ -183,7 +184,7 @@ class Select extends React.Component { const handle_click = (event: React.MouseEvent | React.KeyboardEvent) => this.handle_click(container_ref, selected_option_ref, event); return ( -
+
...
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.Range ]; -export default function create_input({ question, public_state }: QuestionProp, handler: (event: ChangeEvent) => void, blurHandler: (event: FocusEvent) => void): JSX.Element | JSX.Element[] { +export default function create_input({ question, public_state }: QuestionProp, handler: (event: ChangeEvent) => void, blurHandler: (event: FocusEvent) => 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 = ; 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 { 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 { // This is here to allow dynamic selection between the general handler, and the textarea handler. handler(_: ChangeEvent): void {} // eslint-disable-line - blurHandler(_: FocusEvent): void {} // eslint-disable-line + blurHandler(_: FocusEvent): void {} // eslint-disable-line normal_handler(event: ChangeEvent): void { let target: string; @@ -111,6 +115,17 @@ class RenderedQuestion extends React.Component { } } + // eslint-disable-next-line @typescript-eslint/no-unused-vars + on_blur_select_handler(_: FocusEvent): 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): void { if (this.props.question.required && event.target.value === "") { this.setPublicState("error", "Field must be filled."); -- cgit v1.2.3