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

[myml]

NutUI 包名

@nutui/nutui-taro

NutUI 版本号

4.0.4

平台

weapp

重现链接

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

重现步骤

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

<template>
  <view class="index">
    <!-- 一个自动聚焦的搜索框 -->
    <nut-searchbar :autofocus="true" v-model="msg"></nut-searchbar>
    <!-- 用于模拟搜索结果 -->
    <view v-if="show"> msg: {{ msg2 }}</view>
    <!-- 用于模拟搜索按钮，在点击搜索按钮后，搜索结果出现后，搜索框会自动再次聚焦 -->
    <nut-button type="primary" @click="handleClick()">搜索</nut-button>
  </view>
</template>

<script setup lang="ts">
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)
};
</script>

如果将搜索栏放到 <view class="index"> 上面，点击按钮不会触发搜索栏的自动聚焦。

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

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

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

期望的结果是什么？

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

实际的结果是什么？

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

环境信息

  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 命令行工具生成的项目，依赖如下

  "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"
  }

[iCheng]

链接的效果好像没有问题

[myml]

链接的效果好像没有问题

仅在微信真机调试会有

[kyrie204]

我也遇到相同问题，但是有解决办法 通过ref获取到组件实例 下面挂载了一个inputsearch对象 可以使用focus()方法自动聚焦 然后调用blur() 失焦