From e34297136fafe0aa858a6e889aae33a07777be1e Mon Sep 17 00:00:00 2001
From: Aswin V <vaswin91@gmail.com>
Date: Thu, 24 Feb 2022 11:50:00 +0530
Subject: [PATCH] Focus and highlight input on load

---
 pages/saml/login.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/pages/saml/login.tsx b/pages/saml/login.tsx
index 8afe380..ac14906 100644
--- a/pages/saml/login.tsx
+++ b/pages/saml/login.tsx
@@ -1,12 +1,21 @@
 import Head from 'next/head';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import type { FormEvent } from 'react';
 import { useRouter } from 'next/router';
 
 export default function Login() {
   const router = useRouter();
   const { id, audience, acsUrl, providerName, relayState } = router.query;
-  const [email, setEmail] = useState('@example.com');
+  const [email, setEmail] = useState('jackson');
+
+  // Set focus to email input on load
+  const emailInp = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    if (emailInp.current) {
+      emailInp.current.focus();
+      emailInp.current.select();
+    }
+  }, []);
 
   const handleChange = (e: FormEvent<HTMLInputElement>): void => {
     setEmail(e.currentTarget.value);