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

v4.0.4 Input组件通过改变focus来获得焦点会报flushSync渲染错误 #16262

Open
Rambos opened this issue Aug 6, 2024 · 1 comment
Labels
F-react Framework - React T-h5 Target - 编译到 H5 V-4 Version - 4.x

Comments

@Rambos
Copy link

Rambos commented Aug 6, 2024

相关平台

H5

复现仓库

https://github.com/Rambos/taro-input-demo.git
浏览器版本: Chrome
使用框架: React

复现步骤

export default function Index () {
  const [focus, setFocus] = useState(false)
  useLoad(() => {
    console.log('Page loaded.')
  })

  // 如果添加了onFoucs事件,点击按钮获得焦点会出现flushSync渲染警告, 如果移除onFocus则正常
  const onFocus = () => {
    console.log('focus')
  }

  return (
    <View className='index'>
      <Text>Hello world!</Text>
      <Button type='primary' onClick={() => {
        setFocus(true)
      }}
      >点击获得焦点</Button>
      <Input focus={focus} onFocus={onFocus} onBlur={() => {
        setFocus(false)
      }} style={{marginTop: '10px', border: '1px solid #eee', padding: '10px'}} placeholder='获得焦点'
      />
    </View>
  )
}

期望结果

表现正常

实际结果

console.js:288 Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.
at taro-input-core
at ReactComponent (

环境信息

Taro CLI 4.0.4 environment info:
    System:
      OS: macOS 14.5
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 22.1.0 - /usr/local/bin/node
      Yarn: 1.21.1 - /usr/local/bin/yarn
      npm: 10.7.0 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 4.0.4 => 4.0.4
      @tarojs/components: 4.0.4 => 4.0.4
      @tarojs/helper: 4.0.4 => 4.0.4
      @tarojs/plugin-framework-react: 4.0.4 => 4.0.4
      @tarojs/plugin-platform-alipay: 4.0.4 => 4.0.4
      @tarojs/plugin-platform-h5: 4.0.4 => 4.0.4
      @tarojs/plugin-platform-harmony-hybrid: 4.0.4 => 4.0.4
      @tarojs/plugin-platform-jd: 4.0.4 => 4.0.4
      @tarojs/plugin-platform-qq: 4.0.4 => 4.0.4
      @tarojs/plugin-platform-swan: 4.0.4 => 4.0.4
      @tarojs/plugin-platform-tt: 4.0.4 => 4.0.4
      @tarojs/plugin-platform-weapp: 4.0.4 => 4.0.4
      @tarojs/react: 4.0.4 => 4.0.4
      @tarojs/runtime: 4.0.4 => 4.0.4
      @tarojs/shared: 4.0.4 => 4.0.4
      @tarojs/taro: 4.0.4 => 4.0.4
      @tarojs/vite-runner: 4.0.4 => 4.0.4
      babel-preset-taro: 4.0.4 => 4.0.4
      eslint-config-taro: 4.0.4 => 4.0.4
      react: ^18.0.0 => 18.0.0
    npmGlobalPackages:
      typescript: 3.8.3
@taro-bot2 taro-bot2 bot added F-react Framework - React T-h5 Target - 编译到 H5 V-3 Version - 3.x labels Aug 6, 2024
@Rambos
Copy link
Author

Rambos commented Aug 6, 2024

focus也不受控,在h5模式下, 想主动失去焦点都没办法, blur()方法也没用。

@TheKonka TheKonka added V-4 Version - 4.x and removed V-3 Version - 3.x labels Aug 7, 2024
This was referenced Aug 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
F-react Framework - React T-h5 Target - 编译到 H5 V-4 Version - 4.x
Projects
Status: Padding
Development

No branches or pull requests

2 participants