Tetxinput doesn't get cleared when typing fast

[tagizade-samir]

Description

We have basic text input in our chat application. When you type fast in it and press the button to clear the input (usually it also sends message, but i removed everything to check if it works with just clearing), input value remains and you just continue to type. Is there a better way to handle this kinda situation?

_2022_03_14_11_40_17_489.mp4

Right now all the button does - is clear the input and log to console some string, so nothing is affecting

Version

0.63.4

Output of npx react-native info

System:
OS: Windows 10 10.0.19043
CPU: (6) x64 Intel(R) Core(TM) i5-8500 CPU @ 3.00GHz
Memory: 4.63 GB / 15.83 GB
Binaries:
Node: 14.18.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - ~\AppData\Roaming\npm\yarn.CMD
npm: 7.8.0 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels: 28, 29, 30
Build Tools: 28.0.3, 29.0.2, 30.0.0
System Images: android-24 | Google Play Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
Android NDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: Version 4.0.0.0 AI-193.6911.18.40.6514223
Visual Studio: Not Found
Languages:
Java: Not Found
Python: 3.10.2 - C:\Python310\python.EXE
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.4 => 0.63.4
react-native-windows: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Start typing in input and at the same time press the button to clear the input (you should have a button, which clears the input's state)

Snack, code example, screenshot, or link to a repository

No response

[nucleartux]

Can you share minimal reproducible code example?

[tagizade-samir]

`

const [text, setText] = useState('');
const onPressSendBtn = () => {
    console.log('CLEAR');
    setText('');
};

const renderSend = () => {
    return <TouchableOpacity
                style={styles.iconForSend}
                onPress={onPressSendBtn}
                testID={`SendOrAudioButton${routeName}`}
                accessibilityLabel={`SendOrAudioButton${routeName}`} >
                {textMessage || audioMessage}
            </TouchableOpacity>
};

return (
    <>
        <View style={[styles.inputContainer, { height: inputConatinerHeight }]} hitSlop={{ left: 10, top: 10 }} >
            <TextInput
                testID={`MainInput${routeName}`}
                accessibilityLabel={`MainInput${routeName}`}
                defaultValue={text}
                multiline={true}
                style={styles.input}
                maxLength={500}
                numberOfLines={3}
                ref={textInput}
                onChangeText={onChangeText} />
        </View>
        {renderSend()}
    </>
);

`

This is minimal code for reproducing this issue, basic textinput with state clearing

[nucleartux]

Try change:

defaultValue={text}

to

value={text}

[tagizade-samir]

Thank you for your response, but didn't work, same thing happens

[Vantam1601]

Solution ?.

[andreibahachenka]

has anyone found smth?

[Spharian]

Same issue in iOS

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.