How can I compose TextArea with a ScrollArea component?

[joseDaKing]

I want to compose TextArea with a ScrollArea component so that my TextArea has a custom scrollbar, how do I do it, and is it possible?

[benoitgrelard]

Hi @joseDaKing, unfortunately I don't think it's possible as textarea doesn't accept arbritrary children.
I think it would require some kind of wrapper component, perhaps we can look at creating a Textarea primitive at some point to accomodate such custom use cases. Feel free to open a feature request!

[joseDaKing]

I have opened an issue now

[jjenzz]

you could use contenteditable attribute https://codesandbox.io/s/ancient-field-9ycskc?file=/App.js

[benoitgrelard]

That's cool!

I thought there were formatting issues with contenteditable though?

Also, I guess you'd need to ensure the semantics/accessibility is correct. I'm not sure where it's at with regards to contenteditable, might need a few extra role/attributes.

[jjenzz]

yeah, the default contenteditable lets you paste in styled things but i'm preventing that in the effect.

i'm not entirely sure of the a11y implications tbh, i imagine it most likely needs role="textbox" so might be a nice primitive like you suggest :)

[joseDaKing]

Nice solution, for me a11y are an afterthought and this solution seems sufficient but it would be nice if you create a custom a11y Textarea primitive in the future.

[molvqingtai]

I'm using shadcn/ui.
We only need to reset the border and focus-related properties of the Textarea, and then re-implement the Textarea's border and focus properties on the ScrollArea using focus-within. The following example works perfectly:

  <ScrollArea className="box-border max-h-28 w-full rounded-lg border border-input bg-background ring-offset-background focus-within:ring-1 focus-within:ring-ring 2xl:max-h-40">
    <Textarea
      ref={ref}
      onKeyDown={handleKeyDown}
      autoFocus={autoFocus}
      maxLength={maxLength}
      className="box-border resize-none whitespace-pre-wrap break-words border-none bg-gray-50 pb-5 [field-sizing:content] focus:ring-0 focus:ring-offset-0"
      rows={2}
      value={value}
      placeholder="Type your message here."
      onInput={handleInput}
      disabled={disabled}
    />
  </ScrollArea>