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(-)

(limited to 'src')

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