From 7075e8579e5aa038438be9bbb2ba275d52c20910 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 8 Feb 2021 19:29:37 +0200
Subject: Implement focusing text fields if empty on submit

---
 src/pages/FormPage.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'src/pages/FormPage.tsx')

diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index 8e998c5..50f48ba 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -199,7 +199,8 @@ function FormPage(): JSX.Element {
     }
 
     const questions = form.questions.map((question, index) => {
-        return <RenderedQuestion ref={createRef<RenderedQuestion>()} scroll_ref={createRef<HTMLDivElement>()} question={question} public_state={new Map()} key={index + Date.now()}/>;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return <RenderedQuestion ref={createRef<RenderedQuestion>()} focus_ref={createRef<any>()} scroll_ref={createRef<HTMLDivElement>()} question={question} public_state={new Map()} key={index + Date.now()}/>;
     });
 
     async function handleSubmit(event: SyntheticEvent) {
@@ -223,6 +224,9 @@ function FormPage(): JSX.Element {
             const firstErrored = questions[invalidFieldIDs[0]];
             if (firstErrored && firstErrored.props.scroll_ref) {
                 firstErrored.props.scroll_ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
+                if (firstErrored.props.focus_ref && firstErrored.props.focus_ref.current) {
+                    firstErrored.props.focus_ref.current.focus({ preventScroll: true });
+                }
             }
             return;
         }
-- 
cgit v1.2.3

