feat(textarea): auto resizable

[rainyEra]

vd.mp4

In my opinion, an auto-resizable textarea brings a great user experience, and I would like to see it included in this UI library. I discarded the changes in New Yorker because of Server Components. What do you think?

[vercel]

@rainyEra is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 15, 2023 0:38am

[KDKHD]

Could use React.useImperativeHandle to merge the refs so you don't need to pull in an extra dependency.

    const texteAreaRef = useRef<HTMLTextAreaElement>(null)
    React.useImperativeHandle(ref, () => texteAreaRef.current!);

<textarea
        className={cn(
          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
          className
        )}
        ref={texteAreaRef}
        {...props}
      />

https://react.dev/reference/react/useImperativeHandle

[rainyEra]

I know it, I just prefer other way due to readability. -1 dependency, this is also good.

[createfultech]

how can i make a dynamic textarea with react-hook-form, it handles ref by itself . how can i make it use my ref

[isitrita]

@rainyEra do you need help on this?

[rainyEra]

@isitrita sorry, I've been too busy :c

[Obiwarn]

this is so great! please add this!

[masewo]

Nice component!
Had to use overflow-y-hidden on my Windows machine to get rid of the scrollbar.
Would be nice to see it with minRows and maxRows options.
Also the ability to manually turn auto resizing on and off would be great (in the case you do not want to have all your textareas grow).
And the perfect solution for me would contain the ability to replace the ugly Windows scrollbars with the beautiful shadcn scrollbars but I think this is kind of impossible.

[rainyEra]

@shadcn any updates?

[Zakisb]

@shadcn any update?

[rainyEra]

autoResize is now optional, so it won't break other projects. (disabled by default)

[TimurBas]

autoResize is now optional, so it won't break other projects. (disabled by default)

I don't have the autoRezize prop? I just dowloaded the Textarea component.

The PR isn't merged my bad.

[harshpandey002]

Need this!

[iDevBrandon]

any update? @shadcn

[unav4ila8le]

also waiting for this

[krazijames]

Maybe we need this:

const scrollHeight = `${ref.scrollHeight}px`;
const computedStyleMap = ref.computedStyleMap();
const borderTopWidth = computedStyleMap.get("border-top-width")?.toString() ?? "0";
const borderBottomWidth = computedStyleMap.get("border-bottom-width")?.toString() ?? "0";

ref.style.height = `calc(${scrollHeight} + ${borderTopWidth} + ${borderBottomWidth})`;

[jungsikjeong]

Why hasn't it come together yet?

[karisDev]

CSS now has field-sizing property, which yet has only 68% support

[Xu-Justin]

I'm waiting for this. I need this 🙏