equinor / equinor/fusion-react-components
TextArea resize functionality.
- 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
Assessment
This issue has not been assessed yet.