У меня есть приложение чата 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
