From a6e2d50b0cc1dda743702e8aa12a0d001f2f2bfb Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 26 Dec 2022 05:13:15 -0800
Subject: [PATCH] Add new event handlers to Login/Signup

---
 components/LoginModal/index.tsx  | 15 ++++++++++++++-
 components/SignupModal/index.tsx | 15 ++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/components/LoginModal/index.tsx b/components/LoginModal/index.tsx
index fac799ec..141cec85 100644
--- a/components/LoginModal/index.tsx
+++ b/components/LoginModal/index.tsx
@@ -171,6 +171,15 @@ const LoginModal = (props: Props) => {
     })
   }
 
+  function onEscapeKeyDown(event: KeyboardEvent) {
+    setOpen(false)
+  }
+
+  function onOpenAutoFocus(event: Event) {
+    event.preventDefault()
+    if (emailInput.current) emailInput.current.focus()
+  }
+
   return (
     <Dialog open={open} onOpenChange={openChange}>
       <DialogTrigger asChild>
@@ -178,7 +187,11 @@ const LoginModal = (props: Props) => {
           <span>{t('menu.login')}</span>
         </li>
       </DialogTrigger>
-      <DialogContent className="Login Dialog">
+      <DialogContent
+        className="Login Dialog"
+        onEscapeKeyDown={onEscapeKeyDown}
+        onOpenAutoFocus={onOpenAutoFocus}
+      >
         <div className="DialogHeader">
           <div className="DialogTitle">
             <h1>{t('modals.login.title')}</h1>
diff --git a/components/SignupModal/index.tsx b/components/SignupModal/index.tsx
index d8909927..0ea8948d 100644
--- a/components/SignupModal/index.tsx
+++ b/components/SignupModal/index.tsx
@@ -263,6 +263,15 @@ const SignupModal = (props: Props) => {
     })
   }
 
+  function onEscapeKeyDown(event: KeyboardEvent) {
+    setOpen(false)
+  }
+
+  function onOpenAutoFocus(event: Event) {
+    event.preventDefault()
+    if (usernameInput.current) usernameInput.current.focus()
+  }
+
   return (
     <Dialog open={open} onOpenChange={openChange}>
       <DialogTrigger asChild>
@@ -270,7 +279,11 @@ const SignupModal = (props: Props) => {
           <span>{t('menu.signup')}</span>
         </li>
       </DialogTrigger>
-      <DialogContent className="Signup Dialog">
+      <DialogContent
+        className="Signup Dialog"
+        onEscapeKeyDown={onEscapeKeyDown}
+        onOpenAutoFocus={onOpenAutoFocus}
+      >
         <div className="DialogHeader">
           <div className="DialogTitle">
             <h1>{t('modals.signup.title')}</h1>