jd-opensource / jd-opensource/nutui

taro小程序 搜索栏自动聚焦工作异常

Open
#2,685 3 comments 0 reactions 0 assignees View on GitHub
PR Welcome
Dominant language
Vue
Stars
6.5k
Forks
835
PR merge metrics
No merged PRs in 30d

Description

### NutUI 包名

@nutui/nutui-taro

### NutUI 版本号

4.0.4

### 平台

weapp

### 重现链接

https://nutui.jd.com/playground/#eyJBcHAudnVlIjoiXG48dGVtcGxhdGU+XG4gIDx2aWV3IGNsYXNzPVwiaW5kZXhcIj5cbiAgICA8bnV0LXNlYXJjaGJhciA6YXV0b2ZvY3VzPVwidHJ1ZVwiIHYtbW9kZWw9XCJtc2dcIj48L251dC1zZWFyY2hiYXI+XG4gICAgPHZpZXcgdi1pZj1cInNob3dcIj4gbXNnOiB7eyBtc2cyIH19PC92aWV3PlxuICAgIDxudXQtYnV0dG9uIHR5cGU9XCJwcmltYXJ5XCIgQGNsaWNrPVwiaGFuZGxlQ2xpY2soKVwiPueCueaIkTwvbnV0LWJ1dHRvbj5cbiAgPC92aWV3PlxuPC90ZW1wbGF0ZT5cblxuPHNjcmlwdCBzZXR1cCBsYW5nPVwidHNcIj5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSc7XG5cbmNvbnN0IG1zZyA9IHJlZihcInRlc3RcIilcbmNvbnN0IG1zZzIgPSByZWYoXCJcIilcbmNvbnN0IHNob3cgPSByZWYoZmFsc2UpXG5cbmNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4ge1xuICAvLyDpmpDol4/lkI7lu7bov5/mmL7npLrvvIzmqKHmi5/ov5znqIvmlbDmja7or7fmsYLliqDovb1cbiAgc2hvdy52YWx1ZSA9IGZhbHNlXG4gIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgIGNvbnNvbGUubG9nKFwic2hvd1wiKVxuICAgIG1zZzIudmFsdWUgPSBtc2cudmFsdWVcbiAgICBzaG93LnZhbHVlID0gdHJ1ZVxuICB9LCAxMDAwKVxufTtcbjwvc2NyaXB0PiJ9

### 重现步骤

在微信真机调试中,自动聚焦的搜索栏,在进入页面时触发第一次聚焦后,在点击按钮时会再次自动聚焦,代码在下面

```html





msg: {{ msg2 }}

搜索

```

```js

import { ref } from 'vue';

const msg = ref("test")
const msg2 = ref("")
const show = ref(false)

const handleClick = () => {
// 隐藏后延迟显示,模拟远程数据请求加载
show.value = false
setTimeout(() => {
console.log("show")
msg2.value = msg.value
show.value = true
}, 1000)
};

```

如果将搜索栏放到 `` 上面,点击按钮不会触发搜索栏的自动聚焦。

个人猜测是因为点击按钮更改了 `show` 的值,搜索栏下面的view重新渲染,从而触发了这个BUG。

但是我看了 searchbar 组件的源码,组件是在 mounted 时才检查是否设置了 autofocus 然后执行 focus, 在 mounted 里面加调试日志,没有发现点按钮后会触发搜索栏的 mounted。

如果说是微信原生input组件问题,又没看到有将 autofocus 传递到微信原生input组件,也就是说原生input组件并不知道要自动聚焦。

### 期望的结果是什么?

搜索栏的自动聚焦仅在加载时触发一次,之后不应该再被触发

### 实际的结果是什么?

搜索栏的自动聚焦会被多次触发

### 环境信息

```txt
Taro CLI 3.6.16 environment info:
System:
OS: Linux 6.1 Deepin 23 23
Shell: 5.8 - /usr/bin/zsh
Binaries:
Node: 20.9.0 - /run/user/1000/fnm_multishells/350538_1700647794942/bin/node
Yarn: 1.22.19 - ~/.local/share/pnpm/yarn
npm: 10.1.0 - /run/user/1000/fnm_multishells/350538_1700647794942/bin/npm
npmPackages:
@tarojs/cli: 3.6.16 => 3.6.16
@tarojs/components: 3.6.16 => 3.6.16
@tarojs/helper: 3.6.16 => 3.6.16
@tarojs/plugin-framework-vue3: 3.6.16 => 3.6.16
@tarojs/plugin-html: 3.6.16 => 3.6.16
@tarojs/plugin-platform-alipay: 3.6.16 => 3.6.16
@tarojs/plugin-platform-h5: 3.6.16 => 3.6.16
@tarojs/plugin-platform-jd: 3.6.16 => 3.6.16
@tarojs/plugin-platform-qq: 3.6.16 => 3.6.16
@tarojs/plugin-platform-swan: 3.6.16 => 3.6.16
@tarojs/plugin-platform-tt: 3.6.16 => 3.6.16
@tarojs/plugin-platform-weapp: 3.6.16 => 3.6.16
@tarojs/runtime: 3.6.16 => 3.6.16
@tarojs/shared: 3.6.16 => 3.6.16
@tarojs/taro: 3.6.16 => 3.6.16
@tarojs/taro-loader: 3.6.16 => 3.6.16
@tarojs/webpack5-runner: 3.6.16 => 3.6.16
babel-preset-taro: 3.6.16 => 3.6.16
eslint-config-taro: 3.6.16 => 3.6.16
```

### 其他补充信息

使用 taro 命令行工具生成的项目,依赖如下
```json
"dependencies": {
"@babel/runtime": "^7.7.7",
"@tarojs/components": "3.6.16",
"@tarojs/helper": "3.6.16",
"@tarojs/plugin-platform-weapp": "3.6.16",
"@tarojs/plugin-platform-alipay": "3.6.16",
"@tarojs/plugin-platform-tt": "3.6.16",
"@tarojs/plugin-platform-swan": "3.6.16",
"@tarojs/plugin-platform-jd": "3.6.16",
"@tarojs/plugin-platform-qq": "3.6.16",
"@tarojs/plugin-platform-h5": "3.6.16",
"@tarojs/runtime": "3.6.16",
"@tarojs/shared": "3.6.16",
"@tarojs/taro": "3.6.16",
"@tarojs/plugin-html": "3.6.16",
"@tarojs/plugin-framework-vue3": "3.6.16",
"vue": "^3.2.40",
"@nutui/nutui-taro": "^4.0.4",
"@nutui/icons-vue-taro": "^0.0.9"
},
"devDependencies": {
"@babel/core": "^7.8.0",
"@types/webpack-env": "^1.13.6",
"webpack": "^5.78.0",
"@tarojs/taro-loader": "3.6.16",
"@tarojs/webpack5-runner": "3.6.16",
"@tarojs/cli": "3.6.16",
"@vue/babel-plugin-jsx": "^1.0.6",
"@vue/compiler-sfc": "^3.2.40",
"babel-preset-taro": "3.6.16",
"css-loader": "3.4.2",
"eslint-plugin-vue": "^8.0.0",
"eslint-config-taro": "3.6.16",
"eslint": "^8.12.0",
"stylelint": "9.3.0",
"style-loader": "1.3.0",
"vue-loader": "^17.0.0",
"@typescript-eslint/parser": "^5.20.0",
"@typescript-eslint/eslint-plugin": "^5.20.0",
"typescript": "^4.1.0",
"unplugin-vue-components": "^0.23.0",
"ts-node": "^10.9.1",
"@types/node": "^18.15.11"
}
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.