Nativebase: Focus next input with floating label property

[dreamchasersuon]

I have gone through these following points

[ yes ] Check latest documentation: https://docs.nativebase.io/

[ yes ] Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues

[ yes ] Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases

[ yes ] Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink

Issue Description

Hello guys! At this moment I faced with a problem with focusing inputs. I found that focusing don't work if you have a nested _Input_ inside an _Item_ with _floating label_. Fortunately, everything works fine without _floating label_.

Dependencies

• Expo ^32.0.0

• Native Base ^2.12.1

• React 16.5.0

• React Native (https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz)

• React Navigation ^3.0.9

• Node 11.11.0

• Yarn 1.13.0

Expected behaviour

Focus next _Input_ _onSubmitEditing_ using <Item floating label />.

Actual behaviour

Focus next _Input_ using <Item floating label /> return an Error 'Cant focus undefined'.

Steps to reproduce

Imagine this simple Component:

export default class HomeScreen extends React.Component {
  static navigationOptions = {
    header: null,
  };

  constructor(props) {
    super(props);

    this.state = {
      login: '',
      password: ''
    };
  };

  changeLogin(text) {
    this.setState({ login: text })
  };

  changePassword(text) {
    this.setState({ password: text })
  };

  render() {
    return (
      <View style={styles.container}>

          <Item floatingLabel>
            <Label>Login</Label>
            <Input value={ this.state.login }
                   onChangeText={ () => this.changeLogin(text) }
                   autoFocus={true}
                   ref='login'
                   onSubmitEditing={ () => this.refs.password.focus() } />
          </Item>

          <Item floatingLabel>
            <Label>Password</Label>
            <Input value={ this.state.password }
                   onChangeText={ () => this.changePassword(text) }
                   ref='password'
                   onSubmitEditing={ () => this.refs.login.focus() } />
          </Item>

      </View>
    );
  }
}

Focus next Input in _onSubmitEditing_ method dont work properly. In output we have this:

If we will remove _floating label_ property from _Item_ everything will work as expected.

Working example on Dropbox:
https://www.dropbox.com/s/hcduic2uqjqc64l/ReactInput.zip?dl=0

Steps to reroduce:

1. Unzip archive;
2. cd ReactInput;
3. yarn install;
4. yarn start;

Is the bug present in both iOS and Android or in any one of them?

Tested on Android only.

Any other additional info which would help us debug the issue quicker.

Message me.

[dreamchasersuon]

Seems like focus() don't work without _floating label_ too...

[prurph]

blur() also doesn't seem to work.

[AmeerHamzaRiaz]

Update: Changing ref to getRef solves the issue,
Check out this answer:
https://stackoverflow.com/questions/52523092/native-base-input-refs-not-being-set/52523488#52523488

[hanykumar]

Hi @dreamchasersuon, you can follow solution provided by @AmeerHamzaRiaz .
<Item floatingLabel>
<Label>First Name</Label>
<Input
getRef={input => {
this.firstNameRef = input;
}}
onSubmitEditing={() => {
this.lastNameRef._root.focus();
}}
returnKeyType={"next"}
/>
</Item>

And

<Item fixedLabel>
<Label>First Name</Label>
<Input
ref={input => {
this.lastNameRef = input;
}}
onSubmitEditing={() => {
this.lastNameRef._root.focus();
}}
returnKeyType={"next"}
/>
</Item>

In the case of floatingLabel, getRef works, while ref does not. On the other hand, in the case of fixedLabel, ref works, while getRef does not.

[hanykumar]

Hi @dreamchasersuon , closing for now due to inactivity. Let us know if the issue still persists.