Don't auotfocus on mobile

This commit is contained in:
Ian Philips 2022-08-03 16:16:46 -06:00
parent aa3101baa9
commit fab83cfc33

View File

@ -47,6 +47,13 @@ export function GroupChat(props: {
const router = useRouter()
const isMember = user && group.memberIds.includes(user?.id)
const { width, height } = useWindowSize()
const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null)
// Subtract bottom bar when it's showing (less than lg screen)
const bottomBarHeight = (width ?? 0) < 1024 ? 58 : 0
const remainingHeight =
(height ?? 0) - (containerRef?.offsetTop ?? 0) - bottomBarHeight
useMemo(() => {
// Group messages with createdTime within 2 minutes of each other.
const tempMessages = []
@ -86,8 +93,9 @@ export function GroupChat(props: {
}, [messages, router.asPath])
useEffect(() => {
if (inputRef) inputRef.focus()
}, [inputRef])
// is mobile?
if (inputRef && width && width > 720) inputRef.focus()
}, [inputRef, width])
function onReplyClick(comment: Comment) {
setReplyToUsername(comment.userUsername)
@ -107,13 +115,6 @@ export function GroupChat(props: {
inputRef?.focus()
}
const { width, height } = useWindowSize()
const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null)
// Subtract bottom bar when it's showing (less than lg screen)
const bottomBarHeight = (width ?? 0) < 1024 ? 58 : 0
const remainingHeight =
(height ?? 0) - (containerRef?.offsetTop ?? 0) - bottomBarHeight
return (
<Col ref={setContainerRef} style={{ height: remainingHeight }}>
<Col