- 
                Notifications
    You must be signed in to change notification settings 
- Fork 24.9k
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