iOS 钉钉小程序的 <Input /> 没法使用原生的输入法输入中文

[axetroy]

相关平台

钉钉小程序

使用框架: React

复现步骤

import './index.scss'

import { Input, View } from '@tarojs/components'
import { useState } from 'react'

function ImConv() {
    const [content, setContent] = useState('')

    return (
        <View className='im-conv' id='im-conv'>
            <Input
                className='chat-box-content-input'
                style={{ width: '100%' }}
                confirmType='send'
                value={content}
                onInput={(e) => setContent(e.detail.value)}
            />
        </View>
    )
}

export default ImConv

685_1691411694.mp4

期望结果

Input 输入框正常，应该能输入中文

实际结果

实际上不能，但可以通过 enableNative={false} 可以实现中文输入

import './index.scss'

import { Input, View } from '@tarojs/components'
import { useState } from 'react'

function ImConv() {
    const [content, setContent] = useState('')

    return (
        <View className='im-conv' id='im-conv'>
            <Input
                className='chat-box-content-input'
                style={{ width: '100%' }}
                confirmType='send'
                value={content}
                onInput={(e) => setContent(e.detail.value)}
                enableNative={false}
            />
        </View>
    )
}

export default ImConv

684_1691411576.mp4

但这样就没有办法使用 confirmType='send' 确认按钮变成了【换行】

这就很丑陋，需要有一个按钮来确认这个输入

环境信息

👽 Taro v3.6.11


  Taro CLI 3.6.11 environment info:
    System:
      OS: Windows 10 10.0.19045    
    Binaries:
      Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
      npm: 6.14.18 - C:\Program Files\nodejs\npm.CMD
    npmPackages:
      @tarojs/cli: 3.6.11 => 3.6.11
      @tarojs/components: 3.6.11 => 3.6.11
      @tarojs/helper: 3.6.11 => 3.6.11
      @tarojs/plugin-framework-react: 3.6.11 => 3.6.11
      @tarojs/plugin-platform-alipay: 3.6.11 => 3.6.11
      @tarojs/plugin-platform-h5: 3.6.11 => 3.6.11
      @tarojs/plugin-platform-jd: 3.6.11 => 3.6.11
      @tarojs/plugin-platform-qq: 3.6.11 => 3.6.11
      @tarojs/plugin-platform-swan: 3.6.11 => 3.6.11
      @tarojs/plugin-platform-tt: 3.6.11 => 3.6.11
      @tarojs/plugin-platform-weapp: 3.6.11 => 3.6.11
      @tarojs/react: 3.6.11 => 3.6.11
      @tarojs/runtime: 3.6.11 => 3.6.11
      @tarojs/shared: 3.6.11 => 3.6.11
      @tarojs/taro: 3.6.11 => 3.6.11
      @tarojs/taro-h5: 3.6.11 => 3.6.11
      @tarojs/taro-loader: 3.6.11 => 3.6.11
      @tarojs/webpack5-runner: 3.6.11 => 3.6.11
      babel-plugin-transform-taroapi: 3.6.11 => 3.6.11
      babel-preset-taro: 3.6.11 => 3.6.11
      eslint-config-taro: 3.6.11 => 3.6.11
      react: ^18.2.0 => 18.2.0
      taro-ui: 3.1.0-beta.7 => 3.1.0-beta.7

---

补充信息

NOTE:

1. 使用 React.memo 并没有用，即便只渲染一次。
2. 使用 ClassComponent 没有用
3. 不是受控组件也没有用（既没有 value）

[axetroy]

已经查阅过的相关 issue:

#7226
#14196
#6790

https://opendocs.alipay.com/mini/component/input#Bug%20%26%20Tip

非受控组件也是一样

import './index.scss'

import { Input, View } from '@tarojs/components'

function ImConv() {
    return (
        <View className='im-conv' id='im-conv'>
            <Input className='chat-box-content-input' style={{ width: '100%' }} confirmType='send' />
        </View>
    )
}

export default ImConv

686_1691412353.mp4

[axetroy]

这是钉钉小程序原生的写法

<view>
  this is a blank page

  <view>
    <input class="search-input" placeholder="请输入" />
  </view>
</view>

687_1691412727.mp4

可以看到，原生的小程序写法肯定是支持的

[bigmeow]

确实存在这个问题，我也遇到了，中文输入法输着输着突然焦点没有了

[bigmeow]

这个没什么好办法，你的input标签套个form标签吧