Description
Description
Consider a TextInput that has maxLength set and multiline true. When the text input's initial value's length is more than half the maxLength value, onChangeText is automatically called on render.
I am unable to reproduce this in a snack, happens on multiple iOS devices I've tried. No issue with android.
React Native Version
0.71.3
Output of npx react-native info
System:
OS: Linux 4.15 Ubuntu 16.04.7 LTS (Xenial Xerus)
CPU: (4) x64 Intel(R) Core(TM) i5-2320 CPU @ 3.00GHz
Memory: 3.66 GB / 7.76 GB
Shell: 4.3.48 - /bin/bash
Binaries:
Node: 16.17.0 - ~/.config/nvm/versions/node/v16.17.0/bin/node
Yarn: 1.22.19 - ~/.config/nvm/versions/node/v16.17.0/bin/yarn
npm: 8.15.0 - ~/.config/nvm/versions/node/v16.17.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
Android SDK:
API Levels: 28, 29, 30, 31
Build Tools: 28.0.3, 29.0.2, 29.0.3
System Images: android-27 | Google Play Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: Not Found
Languages:
Java: 1.8.0_251 - /home/shrihari/jdk1.8.0_251/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.3 => 0.71.3
npmGlobalPackages:
react-native: Not Found
Steps to reproduce
- Use a TextInput with maxLength={10} and multiline={true}
- Set the initial state of textinput's value to a string of length more than 5.
- Observe onChangeText is automatically called with wrong text parameter
Snack, code example, screenshot, or link to a repository
import React, { useState } from 'react'
import { SafeAreaView, TextInput } from 'react-native'
export default function EditProfileFieldScreen({ route }) {
// const [fieldValue, setFieldValue] = useState('abcde') // works correctly
const [fieldValue, setFieldValue] = useState('abcdef') // does not work correctly
console.log('initial length', fieldValue.length)
const handleTextChange = (text) => {
console.log('text change called', text.length)
setFieldValue(text)
}
return (
<SafeAreaView style={{flex: 1, backgroundColor: 'white'}}>
<TextInput
value={fieldValue}
onChangeText={handleTextChange}
maxLength={10}
multiline={true}
/>
</SafeAreaView>
)
}
I am using Expo SDK 48. I am also running the lastest version of Expo GO