I have a PWA chat app built with Nextjs and I’m seeing this bug. The textarea height is dynamically resized to accommodate longer messages.

I can’t 100% reliably reproduce the bug, but quickly typing or deleting multiple lines seems to do it. I’ve also been unable to reproduce it at all on Android.

bug example
bug example 2

I’ve tried adjusting the padding and removing the rows prop, and the problem is seemingly isolated to iOS.

Code for the component:

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<HTMLFormElement>
}

export const Input = ({ className, isLoading, formRef, ...rest }: IProps) => {
  const ref = useRef<HTMLTextAreaElement>(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 (
    <Textarea
      rows={1}
      ref={ref}
      onKeyDown={e => {
        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}
    />
  )
}

And the Textarea component:

import * as React from 'react'

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

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, ...props }, ref) => {
    return (
      <textarea
        className={cn(
          'flex w-full rounded-md border border-input bg-transparent px-2 py-1 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Textarea.displayName = 'Textarea'

export { Textarea }