Autofocus reply inputs (#242)
This commit is contained in:
parent
98daae478f
commit
5d572c2fe3
@ -4,7 +4,7 @@ import styles from './reply.module.css'
|
|||||||
import { COMMENTS } from '../fragments/comments'
|
import { COMMENTS } from '../fragments/comments'
|
||||||
import { useMe } from './me'
|
import { useMe } from './me'
|
||||||
import TextareaAutosize from 'react-textarea-autosize'
|
import TextareaAutosize from 'react-textarea-autosize'
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState, useRef } from 'react'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import FeeButton from './fee-button'
|
import FeeButton from './fee-button'
|
||||||
import { commentsViewedAfterComment } from '../lib/new-comments'
|
import { commentsViewedAfterComment } from '../lib/new-comments'
|
||||||
@ -75,6 +75,11 @@ export default function Reply ({ item, onSuccess, replyOpen, children }) {
|
|||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
|
const replyInput = useRef(null)
|
||||||
|
useEffect(() => {
|
||||||
|
if (replyInput.current && reply) replyInput.current.focus()
|
||||||
|
}, [reply])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{replyOpen
|
{replyOpen
|
||||||
@ -112,6 +117,7 @@ export default function Reply ({ item, onSuccess, replyOpen, children }) {
|
|||||||
autoFocus={!replyOpen}
|
autoFocus={!replyOpen}
|
||||||
required
|
required
|
||||||
hint={me?.freeComments && me?.sats < 1 ? <span className='text-success'>{me.freeComments} free comments left</span> : null}
|
hint={me?.freeComments && me?.sats < 1 ? <span className='text-success'>{me.freeComments} free comments left</span> : null}
|
||||||
|
innerRef={replyInput}
|
||||||
/>
|
/>
|
||||||
{reply &&
|
{reply &&
|
||||||
<div className='mt-1'>
|
<div className='mt-1'>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user