Skip to content

TextInput onChangeText called automatically for maxLength and multiline #36494

Closed
@shrihari1999

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

  1. Use a TextInput with maxLength={10} and multiline={true}
  2. Set the initial state of textinput's value to a string of length more than 5.
  3. 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

Metadata

Assignees

No one assigned

    Labels

    Component: TextInputRelated to the TextInput component.Impact: RegressionDescribes a behavior that used to work on a prior release, but stopped working recently.Issue: Author Provided ReproThis issue can be reproduced in Snack or an attached project.Needs: Triage 🔍Platform: iOSiOS applications.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions