react-native: Invoking TextInput methods via ref produces errors.

Description

After invoking the focus method of the TextInput component of react native this one shows. Tried other methods based on the documentation. different error shows per method…

React Native version:

System: OS: macOS Mojave 10.14.6 CPU: (4) x64 Intel® Core™ i5-4570R CPU @ 2.70GHz Memory: 468.52 MB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node Yarn: 1.22.0 - /usr/local/bin/yarn npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0 Android SDK: API Levels: 22, 23, 24, 26, 27, 28, 29 Build Tools: 23.0.1, 26.0.3, 27.0.0, 27.0.1, 27.0.3, 28.0.0, 28.0.3, 29.0.0 System Images: android-26 | Google Play Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Intel x86 Atom, android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom_64 Android NDK: Not Found IDEs: Android Studio: 3.4 AI-183.5429.30.34.5452501 Xcode: 11.1/11A1027 - /usr/bin/xcodebuild Languages: Python: 2.7.16 - /usr/local/bin/python npmPackages: @react-native-community/cli: Not Found react: 16.11.0 => 16.11.0 react-native: 0.62.0 => 0.62.0 npmGlobalPackages: react-native: Not Found

Steps To Reproduce

Given the following code:

    inputField = React.createRef();

    componentDidMount() {
          setTimeout(this.inputField.current.focus, 200);
    }

     render() {
           <TextInput
                ref={this.inputField}
                {...otherProps}
            />
     }

Expected Results

Should focus on the input and then show the keyboard.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 4
Comments: 21 (9 by maintainers)

Commits related to this issue

flow fixes (handle properly TODO): TextInput We add `typeof` in several places to address this Flow error that starts appearing at the RN and Flow upgrade: ``` Cannot use `TextInput` as a type. A na... — committed to chrisbobbe/zulip-mobile by chrisbobbe 4 years ago
flow fixes (handle properly TODO): TextInput We add `typeof` in several places to address this Flow error that starts appearing at the RN and Flow upgrade: ``` Cannot use `TextInput` as a type. A na... — committed to chrisbobbe/zulip-mobile by chrisbobbe 4 years ago
flow fixes (handle properly TODO): TextInput We add `typeof` in several places to address this Flow error that starts appearing at the RN and Flow upgrade: ``` Cannot use `TextInput` as a type. A na... — committed to chrisbobbe/zulip-mobile by chrisbobbe 4 years ago
flow: Use `typeof TextInput` when we want the type, not the value. We add `typeof` in several places to address this Flow error that starts appearing at the RN and Flow upgrade: ``` Cannot use `Text... — committed to chrisbobbe/zulip-mobile by chrisbobbe 4 years ago
flow: Use `typeof TextInput` when we want the type, not the value. We add `typeof` in several places to address this Flow error that starts appearing at the RN and Flow upgrade: ``` Cannot use `Text... — committed to chrisbobbe/zulip-mobile by chrisbobbe 4 years ago
flow: Use `typeof TextInput` when we want the type, not the value. We add `typeof` in several places to address this Flow error that starts appearing at the RN and Flow upgrade: ``` Cannot use `Text... — committed to chrisbobbe/zulip-mobile by chrisbobbe 4 years ago
flow: Use `typeof TextInput` when we want the type, not the value. We add `typeof` in several places to address this Flow error that starts appearing at the RN and Flow upgrade: ``` Cannot use `Text... — committed to chrisbobbe/zulip-mobile by chrisbobbe 4 years ago
flow: Use `typeof TextInput` when we want the type, not the value. We add `typeof` in several places to address this Flow error that starts appearing at the RN and Flow upgrade: ``` Cannot use `Text... — committed to chrisbobbe/zulip-mobile by chrisbobbe 4 years ago
flow: Use `typeof TextInput` when we want the type, not the value. We add `typeof` in several places to address this Flow error that starts appearing at the RN and Flow upgrade: ``` Cannot use `Text... — committed to chrisbobbe/zulip-mobile by chrisbobbe 4 years ago

Most upvoted comments

This happened to me as well after updating from 0.61.5 to 0.62

jakobjohansson on Mar 31, 2020

Thanks for the tag. This wasn’t an intentional breaking change.

The repro has the code:

setTimeout(this.inputField.current.focus, 200);

Does it work if you bind the this?

setTimeout(this.inputField.current.focus.bind(this.inputField.current), 200);

Or call the function instead of passing the function?

setTimeout(() => {
  this.inputField.current.focus();
}, 200);

TheSavior on Apr 3, 2020

I’m a little bugged of why setTimeout(this.inputField.current.focus, 200); isn’t working. Am i missing some JS/ES6 basics?

@trglairnarra, I wouldn’t say the issue is part of the basics, but it is a common JavaScript issue. See this MDN page for more information: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#The_this_problem

TheSavior on Apr 6, 2020