React - курсор выходит за границы текстовой области на iOS ⇐ IOS

[Anonymous]

У меня есть приложение чата PWA, созданное с помощью Nextjs, и я вижу эту ошибку. Высота текстовой области динамически изменяется для размещения более длинных сообщений.
Я не могу на 100% надежно воспроизвести ошибку, но быстрый набор или удаление нескольких строк, похоже, помогает. Мне также не удалось воспроизвести его на Android.
Пример ошибки
Пример ошибки 2
Я пробовал настроить дополнение и удаление строк, и проблема, по-видимому, относится только к iOS.
Код для компонента:
import { Textarea, TextareaProps } from '@/components/ui/textarea'
import { useBounds } from '@/hooks/bounds'
import { cn } from '@/utils/utils'
import React, { useEffect, useRef, useState } from 'react'

interface IProps extends TextareaProps {
isLoading?: boolean
formRef?: React.RefObject
}

export const Input = ({ className, isLoading, formRef, ...rest }: IProps) => {
const ref = useRef(null)

useEffect(() => {
if (ref.current) {
const textarea = ref.current

textarea.style.height = '0px'

const scrollHeight = textarea.scrollHeight

textarea.style.height = scrollHeight + 'px'
}
}, [ref, rest.value])

const { isDesktop } = useBounds()

return (
{
if(isDesktop && e.key.toLowerCase() === 'enter' && !e.shiftKey) {
e.preventDefault();
formRef?.current?.requestSubmit();
}
}}
className={cn('resize-none overflow-y-hidden px-3 py-2.5 bg-background', className)}
{...rest}
/>
)
}

И компонент Textarea:
import * as React from 'react'

import { cn } from '@/utils/utils'

export interface TextareaProps extends React.TextareaHTMLAttributes {}

const Textarea = React.forwardRef(
({ className, ...props }, ref) => {
return (

)
}
)
Textarea.displayName = 'Textarea'

export { Textarea }


Подробнее здесь: https://stackoverflow.com/questions/784 ... rea-on-ios