Implement focusing text fields if empty on submit

1 files changed, 5 insertions, 1 deletions

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;
         }