KPC
Kevin Powell - Community•3mo ago
Shayokh

Extremely large textarea

Well, yeah. For some reason, the textarea just keeps growing and growing. 
"use client";

import { useEffect, useState } from "react";
import { IoSend } from "react-icons/io5";
import {
  GetChatHistoryAction,
  handleMessageSubmission,
} from "@/app/actions/interview-new";
import { Textarea } from "@/components/ui/textarea";
import type { TypeGetChatHistory } from "@/types/interview-types";
import NewChatIndicator from "../../_components/NewChatIndicator";
import ChatStructure from "./ChatStructure";

export default function Conversation({ routeId }: { routeId: string }) {
  const [result, setResult] = useState<TypeGetChatHistory>();

  useEffect(() => {
    GetChatHistoryAction(routeId).then((res) => {
      setResult(res);
    });
  }, [routeId]);

  return (
    <section className="relative w-full">
      {result == null ? (
        <p>Loading...</p>
      ) : !result?.success ? (
        <p className="text-red-600">Failed to get interview history</p>
      ) : result?.data.chatHistory.length === 0 ? (
        <NewChatIndicator />
      ) : (
        <ChatStructure chatHistory={result.data.chatHistory} />
      )}

      {/* TODO: We need to rerender when we get the response back!!! */}
      <form action={handleMessageSubmission}>
        <input type="hidden" name="routeId" value={routeId} />

        <div className="fixed flex justify-center items-end gap-x-3 bottom-6 z-20 w-full">
          <Textarea
            name="message-textarea"
            placeholder="Type your message here."
            className="max-h-[8rem]"
          />

          <button
            type="submit"
            className="bg-neutral-800 p-3 rounded-full hover:cursor-pointer hover:bg-neutral-700 transition"
          >
            <IoSend color="#ffffff" size={18} />
          </button>
        </div>
      </form>
    </section>
  );
}
"use client";

import { useEffect, useState } from "react";
import { IoSend } from "react-icons/io5";
import {
  GetChatHistoryAction,
  handleMessageSubmission,
} from "@/app/actions/interview-new";
import { Textarea } from "@/components/ui/textarea";
import type { TypeGetChatHistory } from "@/types/interview-types";
import NewChatIndicator from "../../_components/NewChatIndicator";
import ChatStructure from "./ChatStructure";

export default function Conversation({ routeId }: { routeId: string }) {
  const [result, setResult] = useState<TypeGetChatHistory>();

  useEffect(() => {
    GetChatHistoryAction(routeId).then((res) => {
      setResult(res);
    });
  }, [routeId]);

  return (
    <section className="relative w-full">
      {result == null ? (
        <p>Loading...</p>
      ) : !result?.success ? (
        <p className="text-red-600">Failed to get interview history</p>
      ) : result?.data.chatHistory.length === 0 ? (
        <NewChatIndicator />
      ) : (
        <ChatStructure chatHistory={result.data.chatHistory} />
      )}

      {/* TODO: We need to rerender when we get the response back!!! */}
      <form action={handleMessageSubmission}>
        <input type="hidden" name="routeId" value={routeId} />

        <div className="fixed flex justify-center items-end gap-x-3 bottom-6 z-20 w-full">
          <Textarea
            name="message-textarea"
            placeholder="Type your message here."
            className="max-h-[8rem]"
          />

          <button
            type="submit"
            className="bg-neutral-800 p-3 rounded-full hover:cursor-pointer hover:bg-neutral-700 transition"
          >
            <IoSend color="#ffffff" size={18} />
          </button>
        </div>
      </form>
    </section>
  );
}
22 Replies
Shayokh
ShayokhOP•3mo ago
Textarea.tsx 
import type * as React from "react";

import { cn } from "@/lib/utils";

function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-neutral-950 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        className,
      )}
      {...props}
    />
  );
}

export { Textarea };
import type * as React from "react";

import { cn } from "@/lib/utils";

function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-neutral-950 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        className,
      )}
      {...props}
    />
  );
}

export { Textarea };
13eck
13eck•3mo ago
What does the compiled code look like? Not many of us are React devs so seeing the final form will help immensely to troubleshoot what's wrong.
Shayokh
ShayokhOP•3mo ago
Compiled form?
13eck
13eck•3mo ago
What's the output look like? That actual HTML and CSS.
Shayokh
ShayokhOP•3mo ago
Umm should I share the browser DOM? I am using Nextjs. It doesn't generate the files by default (afaik)
Kevin Powell
Kevin Powell•3mo ago
If you can, that would help 😄 The field-sizing-content might be an issue, but it seems like there is something else at play as well. (I don't use nextjs, but does it not have an npm build?) having a preview online would help as well
13eck
13eck•3mo ago
I, personally, need to see the raw HTML and CSS. All the React and tailwind is making my brain hurt b/c I don't use 'em
Shayokh
ShayokhOP•3mo ago
Let me see if I can get that
13eck
13eck•3mo ago
This, yeah. Setup a codepen with the important bits, or pastebin, I think is another option
Shayokh
ShayokhOP•3mo ago
Ohh wait
Shayokh
ShayokhOP•3mo ago
Shayokh
ShayokhOP•3mo ago
Here are the 2 files in my repo
13eck
13eck•3mo ago
Those are the .tsx files. We need to see the compiled HTML and CSS.
Kevin Powell
Kevin Powell•3mo ago
oh wait, I found the issue 😄 err, maybe. Something is causing the horizontal overflow, but then you have a fixed on the div around the textarea. It's not causing the issue, but it's fixed, so it scrolls along with you as you go to the side. I've had to see a live version of this online so I could poke around in the devtools to figure out more I think
Shayokh
ShayokhOP•3mo ago
That's actually interesting My goal was to keep this textarea in the center of the right side component Initially went for position:sticky but that wasn't behaving well So I thought maybe fixed at the bottom will do Let me see if I can host this part of the codeabase
Kevin Powell
Kevin Powell•3mo ago
fixed is always going to be fixed to the viewport. It also has a w-full on it, which is width: 100%, but that 100% is of the viewport, not anything it's inside of... because with the fixed position, it's not really inside of anything, except the viewport
13eck
13eck•3mo ago
Kevin Powell
Kevin Powell•3mo ago
that might sort of be causing the issue, which is why it's recursively making the window wider... but normally fixed elements won't cause overflow, so that's why I think something else is at play too
Chris Bolson
Chris Bolson•3mo ago
As Kevin says clearly something else is going on. In theory, as your container (containing the textarea and the button) has position fixed, it should stretch across the bottom of the viewport. However, in your video it is offset from the left by the width of the sidebar. Looking at your code I can't work out how/why it is doing that but that may be related 🤔 That said, your github code is not the same as the code in your video so that makes it harder.
Shayokh
ShayokhOP•3mo ago
Hello I fixed the large textarea issue. And now I would like to keep it in the center of the section. I tried applying sticky but it's causing extra space at the bottom and also pushes the sidebar above. Tried fixed which produced output very close to expected output but it takes the full screen width, overlapping the sidebar in the process. Tried absolute which kinda works but gets scrolled away with overflowing section content (doesn't stick at the bottom of the screen as expected) Here is the expected outcome -
Shayokh
ShayokhOP•3mo ago
No description
Shayokh
ShayokhOP•3mo ago

Did you find this page helpful?