React-native-paper: Focussing a text input as soon as it is available crashes the application.

Created on 5 Sep 2018 · 6Comments · Source: callstack/react-native-paper

Current behaviour

I'm trying to give a TextInput focus as soon as the Dialog in which it is contained, is opened. When trying to focus it as soon as the reference is available, the application crashes.

Expected behaviour

I expect the TextInput to focus and open the Keyboard as soon as the dialog opens.

Code sample

The following should reproduce:

<TextInput 
     ref={i => i.focus()} //This crashes.
     name="value" 
     label={this.props.label} 
     value={this.state.value} 
     onChangeText={this.onValueChange} 
     multiline={this.props.multiline} 
     numberOfLines={this.props.numberOfLines} />

What have you tried

Placing it on a timeout, and checking if i itself is null (it is not). After that I was out of ideas pretty quickly.

Your Environment

| software | version
| --------------------- | -------
| android | SDK 26
| react-native | 16.3.1
| react-native-paper | 2.0.1
| node | v8.11.3
| npm or yarn | 6.1.0

Stack Trace

09-05 18:31:16.112 23268 2546 E ReactNativeJS: 09-05 18:31:16.112 23268 2546 E ReactNativeJS:
/> This error is located at:
in withTheme(TextInput) (at DialogPreferenceText.js:28)
in RCTView (at View.js:60)
in View (at DialogPreferenceText.js:27)
in RCTView (at View.js:60)
in View (at ScrollView.js:791)
in RCTScrollView (at ScrollView.js:887)
in ScrollView (at AbstractDialog.js:58)
in RCTView (at View.js:60)
in View (at AbstractDialog.js:57)
in RCTView (at View.js:60)
in View (at Surface.js:65)
in Surface
in ThemeProvider
in withTheme(Surface) (at createAnimatedComponent.js:154)
in AnimatedComponent (at Dialog.js:114)
in RCTView (at View.js:60)
in View (at Modal.js:160)
in RCTView (at View.js:60)
in View (at createAnimatedComponent.js:154)
in AnimatedComponent (at Modal.js:148)
in Modal
in ThemeProvider
in withTheme(Modal) (at Dialog.js:113)
in Dialog
in ThemeProvider
in withTheme(Dialog) (at AbstractDialog.js:55)
in ThemeProvider (at Portal.js:54)
in RCTView (at View.js:60)
in View (at PortalManager.js:44)
in PortalManager (at PortalHost.js:134)
in Portal.Host (at App.js:47)
in RCTView (at View.js:60)
in View (at MenuProvider.js:219)
in RCTView (at View.js:60)
in View (at MenuProvider.js:218)
in MenuProvider (at App.js:45)
in ThemeProvider (at Provider.js:17)
in RCTView (at View.js:60)
in View (at PortalHost.js:131)
in Portal.Host (at Provider.js:16)
in Provider (at App.js:44)
in App (at renderApplication.js:33)
in RCTView (at View.js:60)
in View (at AppContainer.js:102)
in RCTView (at View.js:60)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:32)
TypeError: null is not an object (evaluating 'i.focus')
/> This error is located at:
in withTheme(TextInput) (at DialogPreferenceText.js:28)
in RCTView (at View.js:60)
in View (at DialogPreferenceText.js:27)
in RCTView (at View.js:60)
in View (at ScrollView.js:791)
in RCTScrollView (at ScrollView.js:887)
in ScrollView (at AbstractDialog.js:58)
in RCTView (at View.js:60)
in View (at AbstractDialog.js:57)
in RCTView (at View.js:60)
in View (at Surface.js:65)
in Surface
in ThemeProvider
in withTheme(Surface) (at createAnimatedComponent.js:154)
in AnimatedComponent (at Dialog.js:114)
in RCTView (at View.js:60)
in View (at Modal.js:160)
in RCTView (at View.js:60)
in View (at createAnimatedComponent.js:154)
in AnimatedComponent (at Modal.js:148)
in Modal
in ThemeProvider
in withTheme(Modal) (at Dialog.js:113)
in Dialog
in ThemeProvider
in withTheme(Dialog) (at AbstractDialog.js:55)
in ThemeProvider (at Portal.js:54)
in RCTView (at View.js:60)
in View (at PortalManager.js:44)
in PortalManager (at PortalHost.js:134)
in Portal.Host (at App.js:47)
in RCTView (at View.js:60)
in View (at MenuProvider.js:219)
in RCTView (at View.js:60)
in View (at MenuProvider.js:218)
in MenuProvider (at App.js:45)
in ThemeProvider (at Provider.js:17)
in RCTView (at View.js:60)
in View (at PortalHost.js:131)
in Portal.Host (at Provider.js:16)
in Provider (at App.js:44)
in App (at renderApplication.js:33)
in RCTView (at View.js:60)
in View (at AppContainer.js:102)
in RCTView (at View.js:60)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:32)
TypeError: null is not an object (evaluating 'i.focus')
/> This error is located at:
in withTheme(TextInput) (at DialogPreferenceText.js:28)
in RCTView (at View.js:60)
in View (at DialogPreferenceText.js:27)
in RCTView (at View.js:60)
in View (at ScrollView.js:791)
in RCTScrollView (at ScrollView.js:887)
in ScrollView (at AbstractDialog.js:58)
in RCTView (at View.js:60)
in View (at AbstractDialog.js:57)
in RCTView (at View.js:60)
in View (at Surface.js:65)
in Surface
in ThemeProvider
in withTheme(Surface) (at createAnimatedComponent.js:154)
in AnimatedComponent (at Dialog.js:114)
in RCTView (at View.js:60)
in View (at Modal.js:160)
in RCTView (at View.js:60)
in View (at createAnimatedComponent.js:154)
in AnimatedComponent (at Modal.js:148)
in Modal
in ThemeProvider
in withTheme(Modal) (at Dialog.js:113)
in Dialog
in ThemeProvider
in withTheme(Dialog) (at AbstractDialog.js:55)
in ThemeProvider (at Portal.js:54)
in RCTView (at View.js:60)
in View (at PortalManager.js:44)
in PortalManager (at PortalHost.js:134)
in Portal.Host (at App.js:47)
in RCTView (at View.js:60)
in View (at MenuProvider.js:219)
in RCTView (at View.js:60)
in View (at MenuProvider.js:218)
in MenuProvider (at App.js:45)
in ThemeProvider (at Provider.js:17)
in RCTView (at View.js:60)
in View (at PortalHost.js:131)
in Portal.Host (at Provider.js:16)
in Provider (at App.js:44)
in App (at renderApplication.js:33)
in RCTView (at View.js:60)
in View (at AppContainer.js:102)
in RCTView (at View.js:60)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:32)

Source

TeunKooijman

Most helpful comment

I thought I would take a look at it myself and offer a PR to fix if I could figure it out. For me this is an implementation issue. In the TextInput example, it initially works fine. When you navigate away and the component is unmounted, the reference is destroyed.

I've not seen a TextInput be focused like that, though it is nice and succinct. If you are to try and focus automatically like that you should have a defensive check to check the component exists.

<TextInput
 ref={i => i && i.focus()}

Personally I would say it wasn't a bug.

Aidurber on 13 Oct 2018

👍2

All 6 comments

Thanks for the report. Will take a look.

May I ask why you don't use the autoFocus prop?

satya164 on 6 Sep 2018

Hi @satya164 - thanks for the response! To be completely honest with you, I did not know about the autoFocus prop. I'll have a look whether it works in the morning!

Might I ask where you found out about the autoFocus prop? The docs do not seem to mention it, but I always suspected something like it should exist. Could it be that I am looking at a docs page for an earlier version? I am currently looking at https://callstack.github.io/react-native-paper/text-input.html

Thanks in advance for any further assistance!

TeunKooijman on 6 Sep 2018

@TeunKooijman we need to do a better job at our docs :D

Our TextInput component also accepts the same props as React Native's TextInput, which supports an autoFocus prop: https://facebook.github.io/react-native/docs/textinput#autofocus

satya164 on 6 Sep 2018

Ahh, that explains a lot! Thanks for the help, and I'm sorry for wasting your time. I'll leave this issue open for you guys to decide whether you want to look at the "bug" or not. Have a nice day!

TeunKooijman on 6 Sep 2018

👍1

I've not seen a TextInput be focused like that, though it is nice and succinct. If you are to try and focus automatically like that you should have a defensive check to check the component exists.

<TextInput
 ref={i => i && i.focus()}

Personally I would say it wasn't a bug.

Aidurber on 13 Oct 2018

👍2

@Aidurber thanks for looking into it. Yeah, it's indeed not a bug. If you want to call methods as soon as the input is rendered, you should do it in componentDidMount, not the ref callback. I missed that part.

satya164 on 13 Oct 2018

Was this page helpful?

0 / 5 - 0 ratings