Add new event handlers to Login/Signup

This commit is contained in:
Justin Edmund 2022-12-26 05:13:15 -08:00
parent 0c76866b56
commit a6e2d50b0c
2 changed files with 28 additions and 2 deletions

View file

@ -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>

View file

@ -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>