joschan21/quill

Encounter Hydration error due to extra <textarea> rendered outside the main div

Closed this issue · 2 comments

CheongCheeFeng commented

Did anyone encounter this error?

Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching <textarea> in <div>.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
image

When rendering, another <Textarea/> component seems to be rendered outside the main div. It happens only when I pass autoFocus into the <Textarea/>

This is my ChatInput.tsx

import { Send } from "lucide-react";
import { Button } from "../ui/button";
import { Textarea } from "../ui/textarea";
interface ChatInputProps {
  isDisabled?: boolean;
}

const ChatInput = ({ isDisabled }: ChatInputProps) => {
  return (
    <div className="absolute bottom-0 left-0 w-full">
      <form className="mx-2 flex flex-row gap-3 md:mx-4 md:last:mb-6 lg:mx-auto lg:max-w-2xl xl:max-w-3xl">
        <div className="relative flex h-full flex-1 items-stretch md:flex-col">
          <div className="relative flex w-full flex-grow flex-col p-4">
            <div className="relative">
              <Textarea
                rows={1}
                autoFocus
                maxRows={4}
                placeholder="Enter your question..."
                className="scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2 scrolling-touch resize-none py-3 pr-12 text-base"
              />
              <Button aria-label="send">
                <Send className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </div>
      </form>
    </div>
  );
};

export default ChatInput;
CheongCheeFeng commented

@anand-mukul Test with your code on localhost, having the same error too.
Step to reproduce

  1. One a pdf
  2. Directed to it dynamic url and it is okay.
  3. Refresh and error pops up

Edit:
I found the root cause. It due to my grammerly extension

  • ❤️1