TextArea with autoExpand={true} expands horizontally when typing long text without spaces
Closed this issue ยท 6 comments
๐ Bug report
Current behavior
In a TextArea
with autoExpand
enabled, when typing a long text without a space in it, the text area can become wider than intended.
Admittedly, it is not common for anyone to type long texts without any space in it. While at the same time, it is not exactly a disruptive behavior that the text area expand. Usability is not really affected. So this is a nice-to-have.
Steps to reproduce the bug
Visit the TextArea autoExpand story in storybook and start typing in the textarea at the top, the one that has a label saying that it has auto-expand enabled.
Expected behavior
Ideally we could make the text wrap, even if not at a word boundary, and have the text area width to be kept no matter what.
Possible solutions
I quickly tried enforcing the textarea
's width by using combinations of width: 100%
, max-width: 100%
, overflow
, etc. No luck so far.
Reference
Reported by @engfragui here.
Please, go to this storybook story and start typing in a text area at the top (the one that says it has auto-expand enabled). You should be able to reproduce:
I have updated the issue title and description to make this more clear. It was not as clear before.
Please, go to this storybook story and start typing in a text area at the top (the one that says it has auto-expand enabled). You should be able to reproduce:
I have updated the issue title and description to make this more clear. It was not as clear before.
I think there's something wrong with the last build. The styles are not applied to the storybook.
@gnapse I believe I fixed it. overflow-wrap
by default is break-word
that's why it was expanding horizontally when typing text without spaces. When I changed it to anywhere
, it stopped expanding.
@MahirMahdi can you open a pull request with the proposed change?
@MahirMahdi can you open a pull request with the proposed change?
Yes, no problem. On it.