Skip to content

Commit

Permalink
feat(frontend) added autofocus to liquidity dialog input
Browse files Browse the repository at this point in the history
  • Loading branch information
Emanuel-Palestino committed Aug 3, 2024
1 parent 7cba729 commit fa7a613
Showing 1 changed file with 10 additions and 1 deletion.
11 changes: 10 additions & 1 deletion packages/frontend/app/components/LiquidityDialog.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Dialog } from '@headlessui/react'
import { Form } from '@remix-run/react'
import type { ChangeEvent } from 'react'
import { useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import { XIcon } from '~/components/icons'
import { Button, Input } from '~/components/ui'

Expand Down Expand Up @@ -42,6 +42,13 @@ export const LiquidityDialog = ({
setActualAmount(integerScaledInput)
}

const inputRef = useRef<HTMLInputElement>(null)
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus()
}
}, [])

return (
<Dialog as='div' className='relative z-10' onClose={onClose} open={true}>
<div className='fixed inset-0 bg-tealish/30 bg-opacity-75 transition-opacity' />
Expand All @@ -67,6 +74,7 @@ export const LiquidityDialog = ({
</Dialog.Title>
<div className='mt-2'>
<Input
ref={inputRef}
required
type='number'
name='displayAmount'
Expand All @@ -75,6 +83,7 @@ export const LiquidityDialog = ({
addOn={asset.code}
step='any'
error={errorMessage}
autoFocus
/>
<Form method='post' replace preventScrollReset>
<Input
Expand Down

0 comments on commit fa7a613

Please sign in to comment.