reactjs – React – cursor escaping boundaries of textarea on iOS

I’ve a PWA chat app constructed with Nextjs and I am seeing this bug. The textarea peak is dynamically resized to accommodate longer messages.

I can not 100% reliably reproduce the bug, however shortly typing or deleting a number of traces appears to do it. I’ve additionally been unable to breed it in any respect on Android.

bug instance
bug instance 2

I’ve tried adjusting the padding and eradicating the rows prop, and the issue is seemingly remoted to iOS.

Code for the element:

import { Textarea, TextareaProps } from '@/elements/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 Enter = ({ className, isLoading, formRef, ...relaxation }: IProps) => {
  const ref = useRef<HTMLTextAreaElement>(null)

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

      textarea.fashion.peak="0px"

      const scrollHeight = textarea.scrollHeight

      textarea.fashion.peak = 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?.present?.requestSubmit();
        }
      }}
      className={cn('resize-none overflow-y-hidden px-3 py-2.5 bg-background', className)}
      {...relaxation}
    />
  )
}

And the Textarea element:

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 }