jdf2e / nutui-react

京东风格的移动端 React 组件库 、支持多端小程序(A React UI Toolkit for Mobile Web)
https://nutui.jd.com/react/
815 stars 246 forks source link

被ConfigProvider包裹后的组件内的Input框无法输入, 点击后直接失焦 #2196

Open ONE-0508 opened 2 months ago

ONE-0508 commented 2 months ago

NutUI React 包名

@nutui/nutui-react-taro

NutUI React 版本号

2.6.1

平台

weapp

重现链接

重现步骤

组件被 ConfigProvider 包裹后,内有input框无法输入, 点击输入后会直接失焦

   <ConfigProvider theme={baseTheme}>
            <View className='login-ac content'>
                <Form
                  onFinish={onSubmit}
                  footer={
                    <Button
                      formType='submit'
                      type='primary'
                      block
                    >
                      登录
                    </Button>
                  }
                >
                  <Form.Item
                    label='用户名'
                    name='username'
                    rules={[
                      { max: 20, message: '用户名不能超过20个字符' },
                      { max: 4, message: '用户名必须大于4个字符' },
                      { required: true, message: '请输入用户名' },
                      {
                        pattern: /^[\w-]{4,20}$/,
                        message: '请输入英文或数字组成的用户名!'
                      }
                    ]}
                  >
                    <Input
                      placeholder='请输入用户名'
                      type='text'
                      onChange={(v) => {
                        console.log('onChange', v)
                      }}
                    />
                  </Form.Item>
                  <Form.Item
                    label='密码'
                    name='password'
                    rules={[
                      { required: true, message: '请输入密码' },
                      {
                        pattern: /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/,
                        message: '请输入英文或数字组成的密码'
                      }
                    ]}
                  >
                    <Input
                      placeholder='请输入密码'
                      type='password'
                    />
                  </Form.Item>
                </Form>
            </View>
    </ConfigProvider>

期望的结果是什么?

能正常输入 input

实际的结果是什么?

无法正常输入

环境信息

No response

其他补充信息

No response

ONE-0508 commented 2 months ago

Taro CLI 3.6.27 environment info: System: OS: macOS 13.5 Shell: 5.9 - /bin/zsh Binaries: Node: 18.19.1 - ~/.nvm/versions/node/v18.19.1/bin/node Yarn: 1.22.22 - ~/.nvm/versions/node/v18.19.1/bin/yarn npm: 10.2.4 - ~/.nvm/versions/node/v18.19.1/bin/npm npmPackages: @tarojs/cli: 3.6.26 => 3.6.26 @tarojs/components: 3.6.26 => 3.6.26 @tarojs/helper: 3.6.26 => 3.6.26 @tarojs/plugin-framework-react: 3.6.26 => 3.6.26 @tarojs/plugin-html: ^3.6.27 => 3.6.27 @tarojs/plugin-platform-alipay: 3.6.26 => 3.6.26 @tarojs/plugin-platform-h5: 3.6.26 => 3.6.26 @tarojs/plugin-platform-jd: 3.6.26 => 3.6.26 @tarojs/plugin-platform-qq: 3.6.26 => 3.6.26 @tarojs/plugin-platform-swan: 3.6.26 => 3.6.26 @tarojs/plugin-platform-tt: 3.6.26 => 3.6.26 @tarojs/plugin-platform-weapp: 3.6.26 => 3.6.26 @tarojs/react: 3.6.26 => 3.6.26 @tarojs/runtime: 3.6.26 => 3.6.26 @tarojs/shared: 3.6.26 => 3.6.26 @tarojs/taro: 3.6.26 => 3.6.26 @tarojs/taro-loader: 3.6.26 => 3.6.26 @tarojs/webpack5-runner: 3.6.26 => 3.6.26 babel-preset-taro: 3.6.26 => 3.6.26 eslint-config-taro: 3.6.26 => 3.6.26 react: ^18.0.0 => 18.2.0

github-actions[bot] commented 2 months ago

你好 @ONE-0508, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。请确保选择准确的版本。

eiinu commented 2 months ago

首先 @tarojs/plugin-html 的版本应该与其他 Taro 包保持一致

M0ql commented 1 month ago

应该跟ConfigProvider没什么关系 我有的页面这样用没事 有的页面就不行 一点击就失焦 尚不知道什么原因会触发

eiinu commented 1 month ago

可以提供一个可复现的代码用于排查问题。有可能与 focus 属性的设置有关系

zhangminggeek commented 1 month ago

可以提供一个可复现的代码用于排查问题。有可能与 focus 属性的设置有关系

没有设置 focus,就是正常在 Form 里使用

oasis-cloud commented 4 days ago

可以将 taro 版本指定为 3.6.22,看看问题是否出现。

根据提供的 Demo,在指定版本中并未复现出无法输入的问题。