diff options
| -rw-r--r-- | src/components/InputTypes/Select.tsx | 8 | ||||
| -rw-r--r-- | 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: |