1 files changed, 21 insertions, 1 deletions
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,