Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
- v4.x
- v5.x
- v6.x
- Nightly
Current Behavior
When adding text without white-space (e.g. a URL) into an ion-textarea with auto-grow activated the textarea keeps growing in width past the max-width of it's parent resulting in the a horizontal scroll of the entire ion-item (including the label).
Expected Behavior
I expect it to break the word as it would if auto-grow was not active.
Steps to Reproduce
Simply load the following HTML:
<ion-list>
<ion-item>
<ion-label position="floating">Description</ion-label>
<ion-textarea
auto-grow="true"
value="abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz">
</ion-textarea>
</ion-item>
</ion-list>Code Reproduction URL
https://stackblitz.com/edit/angular-qbshvj?file=src%2Fapp%2Fexample.component.html
Ionic Info
Ionic:
Ionic CLI : 6.11.10 (C:\Users\HT-Marcus\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.2.1
@angular-devkit/build-angular : 14.1.1
@angular-devkit/schematics : 14.1.1
@angular/cli : 14.1.1
@ionic/angular-toolkit : 7.0.0
Capacitor:
Capacitor CLI : 3.5.1
@capacitor/core : 3.5.1
Utility:
cordova-res : not installed
native-run : 1.6.0
System:
NodeJS : v16.13.2 (C:\Program Files\nodejs\node.exe)
npm : 8.3.0
OS : Windows 10
Additional Information
This bug was introduced in #24205.
The fix I found for my app is to add this CSS:
.textarea-wrapper::after { word-break: break-word; }