Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: (Field)textarea scroll bar is abnormal #12866

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

yipl95
Copy link
Contributor

@yipl95 yipl95 commented May 13, 2024

Before submitting a pull request, please read the contributing guide.

在提交 pull request 之前,请阅读 贡献指南

bugfix

#12859

问题复现:

失去焦点、获取焦点、输入中文都能复现,滚动条会滚动到顶部

textarea问题复现

原因分析

image

这里对 inputheight 进行了两次赋值,height=auto 意思是高度撑满父容器,不会出现滚动条,第二次赋值滚动条才会出现,此时滚动条的位置就会被初始化,回到顶部

修复方案

方案一

设置 height=auto 前先记录滚动条位置,第二次设置 height后,将滚动条位置还原

image

+    // 向上查找父节点,直到找到类名为"van-field"的父节点
+    let parentFieldEl = input;
+    while (parentFieldEl && !parentFieldEl.classList.contains("van-field")) {
+      parentFieldEl = parentFieldEl.parentNode;
+    }
+    const parentFieldElScrollTop = parentFieldEl?.scrollTop || 0
  
    input.style.height = 'auto'

    ......

    input.style.height = `${height}px`;
+    parentFieldEl.scrollTop = parentFieldElScrollTop;

方案二

只设置一次height

- input.style.height = 'auto'

......

if (height) {
    input.style.height = `${height}px`;
    // https://github.com/vant-ui/vant/issues/9178
    setRootScrollTop(scrollTop);
+  } else {
+   input.style.height = 'auto'
+  }

方案二代码简洁些,选择了方案二

修复后效果:

textarea修复

@@ -88,6 +87,8 @@ export function resizeTextarea(
input.style.height = `${height}px`;
// https://github.com/vant-ui/vant/issues/9178
setRootScrollTop(scrollTop);
} else {
input.style.height = 'auto';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个改动会导致「高度自适应」功能无法正常工作。

比如输入几行字符:

image

然后删除这些字符,输入框的高度没有恢复到单行:

image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@chenjiahan 确实,没注意到这块,那我能想到的就是记录滚动条位置(上述方案一),每次设置高度后恢复滚动条位置,但写起来不是很优雅,看还有没有其他好方案

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

嗯,目前来看记录滚动条位置可能是一个合适的修复方案

@codecov-commenter
Copy link

codecov-commenter commented May 20, 2024

Codecov Report

Attention: Patch coverage is 60.00000% with 2 lines in your changes are missing coverage. Please review.

Project coverage is 89.74%. Comparing base (8cb3fe5) to head (66aa5c3).
Report is 8 commits behind head on main.

Files Patch % Lines
packages/vant/src/field/utils.ts 60.00% 0 Missing and 2 partials ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main   #12866      +/-   ##
==========================================
+ Coverage   89.67%   89.74%   +0.06%     
==========================================
  Files         257      257              
  Lines        6957     6962       +5     
  Branches     1711     1714       +3     
==========================================
+ Hits         6239     6248       +9     
+ Misses        382      377       -5     
- Partials      336      337       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants