taro input 组件焦点丢失的问题

ldioqlga  于 2个月前  发布在  其他
关注(0)|答案(2)|浏览(20)

相关平台

微信小程序

复现仓库

https://github.com/robinv8/taro-demo.git
小程序基础库: 2.21.0
使用框架: React

复现步骤

输入一个字符,input 焦点丢失
Screen.Recording.2023-04-30.at.22.12.52.mov

return (
    <View style={{ display: "flex" }}>
      <Input
        value={value}
        onInput={(e) => {
          setValue(e.detail.value);
        }}
        focus={false}
        placeholder="请输入"
      ></Input>
      {value && (
        <Text
          onClick={() => {
            setValue("");
          }}
        >
          Clear
        </Text>
      )}
      <View>{children}</View>
    </View>
  );

focusfalse ,并且渲染 children 时,会出现该问题

期望结果

保持 focus 状态

实际结果

focus 状态丢失

环境信息

Taro CLI 3.6.6 environment info:
    System:
      OS: macOS 13.3.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node
      Yarn: 1.22.15 - ~/.yarn/bin/yarn
      npm: 8.15.0 - ~/.nvm/versions/node/v16.17.1/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.6 => 3.6.6 
      @tarojs/components: 3.6.6 => 3.6.6 
      @tarojs/helper: 3.6.6 => 3.6.6 
      @tarojs/plugin-framework-react: 3.6.6 => 3.6.6 
      @tarojs/plugin-platform-alipay: 3.6.6 => 3.6.6 
      @tarojs/plugin-platform-h5: 3.6.6 => 3.6.6 
      @tarojs/plugin-platform-jd: 3.6.6 => 3.6.6 
      @tarojs/plugin-platform-qq: 3.6.6 => 3.6.6 
      @tarojs/plugin-platform-swan: 3.6.6 => 3.6.6 
      @tarojs/plugin-platform-tt: 3.6.6 => 3.6.6 
      @tarojs/plugin-platform-weapp: 3.6.6 => 3.6.6 
      @tarojs/react: 3.6.6 => 3.6.6 
      @tarojs/runtime: 3.6.6 => 3.6.6 
      @tarojs/shared: 3.6.6 => 3.6.6 
      @tarojs/taro: 3.6.6 => 3.6.6 
      @tarojs/webpack5-runner: 3.6.6 => 3.6.6 
      babel-preset-taro: 3.6.6 => 3.6.6 
      eslint-config-taro: 3.6.6 => 3.6.6 
      react: ^18.0.0 => 18.2.0 
      taro-ui: 3.1.0-beta.4 => 3.1.0-beta.4
wxclj1h5

wxclj1h51#

我发现问题可能是出在clear上面,你把clear去掉就没问题了

ruoxqz4g

ruoxqz4g2#

我发现问题可能是出在clear上面,你把clear去掉就没问题了

但自定义 clear 是常规操作,经过测试,跟 children 有关系,如果以下面的方式传 children,就没问题

{children && <View>{children}</View>}

相关问题