From 74a136f90e7d036aa7872a2a7c4748736dcea127 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sun, 24 Oct 2021 17:50:18 +0800
Subject: [PATCH] fix(Field): adjust textarea size when focus/blur (#9719)
---
packages/vant/src/field/Field.tsx | 16 +++++++++-------
1 file changed, 9 insertions(+), 7 deletions(-)
diff --git a/packages/vant/src/field/Field.tsx b/packages/vant/src/field/Field.tsx
index d1b3acf5d..40ff16606 100644
--- a/packages/vant/src/field/Field.tsx
+++ b/packages/vant/src/field/Field.tsx
@@ -297,9 +297,17 @@ export default defineComponent({
const blur = () => inputRef.value?.blur();
const focus = () => inputRef.value?.focus();
+ const adjustTextareaSize = () => {
+ const input = inputRef.value;
+ if (props.type === 'textarea' && props.autosize && input) {
+ resizeTextarea(input, props.autosize);
+ }
+ };
+
const onFocus = (event: Event) => {
state.focused = true;
emit('focus', event);
+ nextTick(adjustTextareaSize);
// readonly not work in legacy mobile safari
const readonly = getProp('readonly');
@@ -313,6 +321,7 @@ export default defineComponent({
updateValue(getModelValue(), 'onBlur');
emit('blur', event);
validateWithTrigger('onBlur');
+ nextTick(adjustTextareaSize);
resetScroll();
};
@@ -364,13 +373,6 @@ export default defineComponent({
emit('keypress', event);
};
- const adjustTextareaSize = () => {
- const input = inputRef.value;
- if (props.type === 'textarea' && props.autosize && input) {
- resizeTextarea(input, props.autosize);
- }
- };
-
const renderInput = () => {
const controlClass = bem('control', [
getProp('inputAlign'),