ant-design / ant-design-mobile-rn

Ant Design for React Native
https://rn.mobile.ant.design/
MIT License
3.07k stars 611 forks source link

[Bug] iOS模拟器,使用Input之后,Input或者官方的TextInput无法聚焦光标(手动把iPhone的模拟器的键盘缩下去的情况,即按command+shift+k) #1373

Open inkCrazy opened 1 month ago

inkCrazy commented 1 month ago

💬 前提强调

🙋 描述详情/重现步骤

<SafeAreaView keyboardShouldPersistTaps="handled" style={{flex: 1}}>
      <TextInput
        style={{
          width: '100%',
          height: 200,
          borderWidth: 1,
        }}
        placeholder={'请输入客户公司名称'}
        placeholderTextColor={{color: '#8C8C8C'}}
        underlineColorAndroid="transparent"
        returnKeyType="done"
        autoCapitalize={'none'}
        multiline={true}
      />
      <Input
        maxLength={5}
        showCount={{
          formatter: ({count, maxLength}) => `${count}/${maxLength}`,
        }}
        placeholder="showCount.formatter"
      />
      {/* <Form.Item label="拜访记录"> */}
      {/* <Input.TextArea
        placeholder="请填写10个字以上的问题描述,以便我们提供更好的服务。"
        maxLength={200}
        showCount
        rows={10}
      /> */}
      {/* </Form.Item> */}
    </SafeAreaView>

🔴 版本

v20.6.1

💻 运行环境

iOS

⚫️ npx react-native info输出信息

System: OS: macOS 14.5 CPU: (10) arm64 Apple M2 Pro Memory: 90.84 MB / 16.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 20.6.1 path: /var/folders/kb/p5p48sk13csbptrctf07nlt00000gn/T/yarn--1725698183885-0.8496351423363109/node Yarn: version: 1.22.22 path: ~/Documents/Daling072/node_modules/.bin/yarn npm: version: 9.8.1 path: /opt/homebrew/bin/npm Watchman: version: 2024.01.22.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.13.0 path: /Users/inkcrazy/.rvm/gems/ruby-3.0.0/bin/pod SDKs: iOS SDK: Platforms:

补充说明

Xcode版本:Version 15.4 (15F31d), iOS模拟器版本:iOS 17.5 (21F79)

Xcode log: -[RTIInputSystemClient remoteTextInputSessionWithID:performInputOperation:] perform input operation requires a valid sessionID. inputModality = Keyboard, inputOperation = , customInfoType = UIEmojiSearchOperations

1uokun commented 1 month ago

Same issue: https://github.com/facebook/react-native/issues/41801

暂未得到官方解决,关注后续

inkCrazy commented 1 month ago

直接用官方的没问题。

corupta commented 5 days ago

Hi there, I experienced the same issue. The problem resolves down to line: Keyboard.dismiss() in components/input/Input.tsx#L59

  React.useEffect(() => {
    const keyboardHide = Keyboard.addListener('keyboardDidHide', () => {
      Keyboard.dismiss()
    })
    return () => {
      keyboardHide.remove()
      if (timer.current) {
        clearTimeout(timer.current)
      }
    }
  }, [])

In which the Input dismisses Keyboard to lose focus, if the keyboard was somehow closed, normal in mobile devices but problematic in IOS Simulator if you were to use hardware keyboard instead of soft keyboard. (can switch between them via CMD+SHIFT+K)

I really wanted to use hardware keyboard in my development environment so what I did is to copy the whole file, create a patched module in which I added import { isDevice } from 'expo-device'; and updated Keyboard.dismiss() to if(isDevice)Keyboard.dismiss(); Now, I can happily use it from my simulator with hardware keyboard.

Note that my guess is that such an issue might also rise when opening an app in iPad with a hardware keyboard connected.

It'd be great if antd team can plan a better alternative for such cases.

PS:

@1uokun I also occasionally experience the other issue you shared but it was resolved by clearing the metro cache.