Add focus handler for select (thanks Scaleios)

1 files changed, 7 insertions, 1 deletions

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>