Nativebase: InputGroup needs onSubmitEditing

[polygoal]

I'm having problems implementing onSubmitEditingto InputGroup:

<InputGroup style={styles.input}>
       <Icon style={{color: '#fff'}} name='md-mail' />
       <Input placeholder='EMAIL' />
</InputGroup>

In react native this already works:

<TextInput 
  style = {styles.titleInput}
  returnKeyType = {"next"}
  autoFocus = {true}
  placeholder = "Title"
  onSubmitEditing={(event) => { 
    this.refs.SecondInput.focus(); 
  }}
/>
<TextInput
  ref='SecondInput'
  style = {styles.descriptionInput}          
  multiline = {true}
  maxLength = {200}
  placeholder = "Description" />

Regards,
Peer from Polygoal

[sankhadeeproy007]

Did you try using onSubmitEditing with Input inside TextInput?

[sankhadeeproy007]

Try this!

[trevor-coleman]

I had a similar problem, and the solution above didn't work. But I managed to get it working with a small change so I thought I'd share it in case others found it useful.

I managed to get it to work by replacing:

this.refs.SecondInput._textInput.focus()

with

this.refs.SecondInput._root.focus()

Here's the whole thing:

<Container>
        <Image source={require( "../../assets/image.png" )} style={styles.backgroundImage}>
        <Content ref={c => this._content= c}>
          <KeyboardAvoidingView 
            behavior='position' 
            style={styles.form}
            >
            <Form>
              <InputGroup 
                style={styles.email} 
                regular>
              <Input
                returnKeyType='next'
                placeholder='Email'
                keyboardType='email-address'
                value={this.state.email}
                onChangeText={
                  ( email ) => this.setState({ email })
                }
                onSubmitEditing={
                  (event) => {
                    console.log("onSubmitEditing");
                    console.log(this.refs);
                    console.log(this.refs.SecondInput);
                    this.refs.SecondInput._root.focus();   // <-- MADE THE CHANGE HERE
                    }
                  }
                />
            </InputGroup>
            <InputGroup style={styles.password} regular>
              <Input
                secureTextEntry
                ref='SecondInput'
                returnKeyType='done'  
                placeholder='Password' 
                value={this.state.password} 
                onChangeText={
                  ( password ) => this.setState({ password })
                }/>
            </InputGroup>
            <View style={styles.buttonRow}>
              <Button style={styles.buttons} light>
                <Text>Sign Up</Text>
              </Button>
              <Button style={styles.buttons} primary>
                <Text>Sign In</Text>
              </Button>
            </View></Form>
          </KeyboardAvoidingView>

      </Content>
      </Image>
      </Container>

Apologies if it's spaghetti -- I'm still a beginner. 😬

[sebasgarcep]

@trevor-coleman This is definitely an issue that should be reopened (or a new issue should be submitted). When passing refs to NativeBase Components I expect the ref callback to return the raw element for basic components like Input. Either this should be fixed, or what I think is a better solution, this should be documented.

[yhenni1989]

Documentation should clearly state how all these components break the normal functionalities compared to react native elements.

[sebasgarcep]

This should help: https://reactjs.org/docs/forwarding-refs.html

[SupriyaKalghatgi]

Its been long time that InputGroup is deprecated