javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 18:54:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(textarea): properly adjust auto-grow textarea in scrolled content (#19776)

Browse Source 
fixes #19193
This commit is contained in:
Hayden Braxton
2020-03-24 11:48:57 -04:00
committed by Liam DeBeasi
parent a3fc77be91
commit 8bd5bace73
1 changed files with 32 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
core/src/components/textarea/textarea.tsx
View File

@ -21,6 +21,7 @@ export class Textarea implements ComponentInterface {
private nativeInput?: HTMLTextAreaElement;
private inputId = `ion-input-${textareaIds++}`;
private didBlurAfterEdit = false;
private textareaWrapper?: HTMLElement;
@Element() el!: HTMLElement;
@ -191,13 +192,15 @@ export class Textarea implements ComponentInterface {
this.runAutoGrow();
}
// TODO: performance hit, this cause layout thrashing
private runAutoGrow() {
const nativeInput = this.nativeInput;
if (nativeInput && this.autoGrow) {
readTask(() => {
nativeInput.style.height = 'inherit';
nativeInput.style.height = 'auto';
nativeInput.style.height = nativeInput.scrollHeight + 'px';
if (this.textareaWrapper) {
this.textareaWrapper.style.height = nativeInput.scrollHeight + 'px';
}
});
}
}
@ -310,29 +313,34 @@ export class Textarea implements ComponentInterface {
[mode]: true,
}}
>
<textarea
class="native-textarea"
ref={el => this.nativeInput = el}
autoCapitalize={this.autocapitalize}
autoFocus={this.autofocus}
disabled={this.disabled}
maxLength={this.maxlength}
minLength={this.minlength}
name={this.name}
placeholder={this.placeholder || ''}
readOnly={this.readonly}
required={this.required}
spellCheck={this.spellcheck}
cols={this.cols}
rows={this.rows}
wrap={this.wrap}
onInput={this.onInput}
onBlur={this.onBlur}
onFocus={this.onFocus}
onKeyDown={this.onKeyDown}
<div
class="textarea-wrapper"
ref={el => this.textareaWrapper = el}
>
{value}
</textarea>
<textarea
class="native-textarea"
ref={el => this.nativeInput = el}
autoCapitalize={this.autocapitalize}
autoFocus={this.autofocus}
disabled={this.disabled}
maxLength={this.maxlength}
minLength={this.minlength}
name={this.name}
placeholder={this.placeholder || ''}
readOnly={this.readonly}
required={this.required}
spellCheck={this.spellcheck}
cols={this.cols}
rows={this.rows}
wrap={this.wrap}
onInput={this.onInput}
onBlur={this.onBlur}
onFocus={this.onFocus}
onKeyDown={this.onKeyDown}
>
{value}
</textarea>
</div>
</Host>
);
}