react / react/react-native

iOS <TextInput multiline/> onChangeText does not fire if only one character

未关闭
#38,105 10 条评论 4 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

Component: TextInput Issue: Author Provided Repro Needs: Triage :mag: Platform: iOS
主要语言
C++
星标
127k
派生
25.3k
平均合并
1 天 23 小时
30 天内合并 PR
4

描述

Description

The onChangeText for my TextInput used for a ChatBox is not working. After reset the text state to '' (after sending a message), the first character is always lost and the onChange event is not fired.

React Native Version

0.72.0

Output of npx react-native info

System:
OS: macOS 13.4
CPU: (10) x64 Apple M1 Pro
Memory: 45.71 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 16.14.0
path: /usr/local/bin/node
Yarn:
version: 1.22.19
path: /usr/local/bin/yarn
npm:
version: 8.3.1
path: /usr/local/bin/npm
Watchman:
version: 2022.07.04.00
path: /usr/local/bin/watchman
Managers:
CocoaPods:
version: 1.11.3
path: /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 22.4
- iOS 16.4
- macOS 13.3
- tvOS 16.4
- watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: 2022.2 AI-222.4459.24.2221.9971841
Xcode:
version: 14.3.1/14E300c
path: /usr/bin/xcodebuild
Languages:
Java:
version: 15.0.2
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.0
wanted: 0.72.0
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

Steps to reproduce

Happens only with TextInput with multiline enabled, only iOS, only this specific flow

  1. User input any characters into <TextInput/>, and press Send
  2. After msg is sent, <TextInput/> value is cleared via setText('')
  3. After that, when user input one character, onChangeText doesn't fire.

Other flows onChangeText works normally, such as

  • Pressing 2 characters
  • Clear the textinput via backspace
  • Disable multiline
Snack, code example, screenshot, or link to a repository

Snack: https://snack.expo.dev/@tylerc/blessed-ice-cream
The same issue can't be reproduced in Snack, only happens on iOS simulator or actual device

https://github.com/facebook/react-native/assets/86952204/2595e47e-4fda-4a8e-ae93-a4a3221f53b9

import React, {useCallback, useState} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';

function App(): JSX.Element {
  const [value, setValue] = useState('');

  const onChangeText = useCallback((text: string) => {
    console.log('onChangeText', text);
    setValue(text);
  }, []);

  const onPressSend = useCallback(() => {
    setValue('');
  }, []);

  return (
    <SafeAreaView>
      <View style={styles.container}>
        <TextInput
          style={styles.textInput}
          multiline
          value={value}
          onChangeText={onChangeText}
        />
        <TouchableOpacity style={styles.sendContainer} onPress={onPressSend}>
          <Text
            style={[styles.sendButton, textStateStyle(value).conditionalStyle]}>
            {'Send'}
          </Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
}
const textStateStyle = (value: string) =>
  StyleSheet.create({
    conditionalStyle: {color: value.length ? 'dodgerblue' : 'lightgrey'},
  });

const styles = StyleSheet.create({
  container: {flexDirection: 'row'},
  textInput: {
    height: 100,
    flex: 1,
    borderColor: 'black',
    borderWidth: 1,
    marginLeft: 5,
  },
  sendContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 10,
  },
  sendButton: {fontSize: 16, fontWeight: '800'},
});

export default App;

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

在 iOS 模拟器或设备上从提供的 TextInput multiline 复现开始,重点关注 Send 后受控值的重置以及第一个字符的输入路径。跟踪 TextInput onChangeText 入口点,并验证 setValue('') 后的第一个字符是否已传递;确认现有流程仍然正常运行。

由索引模型根据 Issue 内容生成。

评估

技术栈
react-native
领域
mobile
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。