TextAREA Автоматочный и контролируемый вход вызывает мерцание и прыжок курсора ⇐ Javascript

[Anonymous]

Я работаю над вводом чата в React, который должен вести себя как chatgpt stextarea: < /p>

• Автоматически расширять как типы пользователей < /li>
  Оберните длинные линии без горизонтального scroll < /li>
  Отправить сообщение в Enter, Insert Newline on shift+Enterne enter < /li>
  >
  ol> ol> ol. Код: < /p>
  родительский компонент: < /p>

  Код: Выделить всё

  import { useEffect, useState } from "react";
  import ChatInput from "./ChatInput";
  
  export default function App() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
  const id = setInterval(() => setTick(t => t + 1), 1000);
  return () => clearInterval(id);
  }, []);
  
  return (
  
  Parent tick: {tick}
   console.log("submit:", m)} />
  
  );
  }
  < /code>
  Дочерний компонент: < /p>
  export default function ChatInput({ onSubmit }) {
  const [message, setMessage] = useState("");
  const ref = useRef(null);
  const handleChange = (e) => {
  setMessage(e.target.value);
  const el = ref.current;
  if (el) {
  el.style.height = "0px";
  el.style.height = `${el.scrollHeight}px`;
  }
  };
  const handleKeyDown = (e) => {
  if (e.key === "Enter" && !e.shiftKey) {
  e.preventDefault();
  onSubmit(message);
  setMessage("");
  if (ref.current) ref.current.style.height = "0px";
  }
  };
  return (
  
  );
  }
  < /code>
  [b] Проблема: < /strong>
  Иногда текстовое отверстие мерцает при изменении размера. В некоторых браузерах (особенно хром) курсор прыгает до конца текста, если я попытаюсь редактировать в середине сообщения. This occurs more when the component re renders (example:- parent state updates).
  Steps to reproduce:[/b]
  
  Type multiple lines so the textarea grows.
  
  [*]Click in the middle of the text and edit.
  
  [*]Observe flicker/caret jump, especially when app's tick forces a parent re-render.
  
  [/list]
  What I tried:
  
  [*]Using onChange

  instead of onInput same issue.
  Moving Логика изменения размера в expecteeffect () все еще мерцает.>
  
  Подробнее здесь: https://stackoverflow.com/questions/797 ... ursor-jump