fix #8423

3 files changed, 27 insertions, 1 deletions

diff --git a/packages/challenger-ui/src/Routing.tsx b/packages/challenger-ui/src/Routing.tsx
index 6711e4cae..6166f159a 100644
--- a/packages/challenger-ui/src/Routing.tsx
+++ b/packages/challenger-ui/src/Routing.tsx
@@ -200,6 +200,7 @@ function PublicRounting(): VNode {
           }}
         >
           <AskChallenge
+            focus
             nonce={location.values.nonce}
             routeSolveChallenge={publicPages.answer}
             onSendSuccesful={() => {
@@ -233,6 +234,7 @@ function PublicRounting(): VNode {
           }}
         >
           <AnswerChallenge
+            focus
             nonce={location.values.nonce}
             routeAsk={publicPages.ask}
             onComplete={() => {
diff --git a/packages/challenger-ui/src/pages/AnswerChallenge.tsx b/packages/challenger-ui/src/pages/AnswerChallenge.tsx
index 5e7973b3d..73a79c51f 100644
--- a/packages/challenger-ui/src/pages/AnswerChallenge.tsx
+++ b/packages/challenger-ui/src/pages/AnswerChallenge.tsx
@@ -36,11 +36,12 @@ export const EMAIL_REGEX = /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/;
 
 type Props = {
   nonce: string;
+  focus?: boolean;
   onComplete: () => void;
   routeAsk: RouteDefinition<{ nonce: string }>;
 };
 
-export function AnswerChallenge({ nonce, onComplete, routeAsk }: Props): VNode {
+export function AnswerChallenge({ focus, nonce, onComplete, routeAsk }: Props): VNode {
   const { lib } = useChallengerApiContext();
   const { i18n } = useTranslationContext();
   const { state, accepted, completed } = useSessionState();
@@ -189,6 +190,8 @@ export function AnswerChallenge({ nonce, onComplete, routeAsk }: Props): VNode {
               </label>
               <div class="mt-2.5">
                 <input
+                  autoFocus
+                  ref={focus ? doAutoFocus : undefined}
                   type="number"
                   name="pin"
                   id="pin"
@@ -250,6 +253,23 @@ export function AnswerChallenge({ nonce, onComplete, routeAsk }: Props): VNode {
   );
 }
 
+/**
+ * Show the element when the load ended
+ * @param element
+ */
+export function doAutoFocus(element: HTMLElement | null): void {
+  if (element) {
+    setTimeout(() => {
+      element.focus({ preventScroll: true });
+      element.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "center",
+      });
+    }, 100);
+  }
+}
+
 export function undefinedIfEmpty<T extends object>(obj: T): T | undefined {
   return Object.keys(obj).some(
     (k) => (obj as Record<string, T>)[k] !== undefined,
diff --git a/packages/challenger-ui/src/pages/AskChallenge.tsx b/packages/challenger-ui/src/pages/AskChallenge.tsx
index aaca51db7..30b50d707 100644
--- a/packages/challenger-ui/src/pages/AskChallenge.tsx
+++ b/packages/challenger-ui/src/pages/AskChallenge.tsx
@@ -27,6 +27,7 @@ import {
 import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
 import { useSessionState } from "../hooks/session.js";
+import { doAutoFocus } from "./AnswerChallenge.js";
 
 type Form = {
   email: string;
@@ -37,12 +38,14 @@ type Props = {
   nonce: string;
   onSendSuccesful: () => void;
   routeSolveChallenge: RouteDefinition<{ nonce: string }>;
+  focus?: boolean;
 };
 
 export function AskChallenge({
   nonce,
   onSendSuccesful,
   routeSolveChallenge,
+  focus,
 }: Props): VNode {
   const { state, accepted, completed } = useSessionState();
   const status = state?.lastStatus;
@@ -162,6 +165,7 @@ export function AskChallenge({
                   type="email"
                   name="email"
                   id="email"
+                  ref={focus ? doAutoFocus : undefined}
                   maxLength={512}
                   autocomplete="email"
                   value={email}