equinor / equinor/fusion-react-components

TextArea resize functionality.

Open
#1,136 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
9
Forks
5
Avg merge
4d 3h
Merged PRs (30d)
52

Description

**Is your feature request related to a problem? Please describe.**
A user asked for the ability to resize TextArea elements because they were to small.
So naturally I looked into adding the styling *resize: vertical* to no awail.

Is there a good way to make TextArea resizeable that I am missing? I would love to hear about it. If not, this is something that could be added sometime.

**Describe the solution you'd like**
I would like it if there was a option for the height of the TextArea component could dynamically be set. Depending on the lines added to the TextArea.

I would like to be able to set *resize: vertical* styling on the TextArea component or have the *wrap* textarea attribute exposed so that I could manipulate the height dynamically with the *rows* prop.

Alternatively You could also set a part attribute to make us able to do some of these changes our self. Or expose a ref as they have done with EDS-components so that we can manipulate some of these more specific stuff.

**Describe alternatives you've considered**
Because of the way the TextArea component is built as a shadow dom element this is impossible. So I tried a few different solutions to this but nothing really worked the way I wanted it to. I tried to manipulate the *rows* prop with a regex matcher so the textarea auto expands with line breaks. But that won't work when line break happens because of string length. It would have worked if the *wrap* attribute was exposed as a prop so I could set *wrap: hard* and force line breaks on line end.

I tried to make it work with eds-components. But there was another issue, *resize: none* was hardcoded into style on the component. however, in this case there is a ref exposed so I could manipulate the style attribute with a useEffect. But this brings another issue where the styling of the inputs are so different between fusion-react-components and eds-components that I would either have to create a wrapper component for eds-components and recreate the styling of the fusion-react-textarea component or change all input fields in the app to be eds-components. Neither option is really something I want to do.

I even tested the old fusion-components TextArea, here it seems like it is actually auto expanding depending on how much text is here. But, as far as I am aware: We shouldn't use this library.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.