CODEWITHSUNDEEP
javascriptreact-native
Tom M
Tom M

Reputation: 2894

TextInput disabled after closing keyboard

Using React Native TextInput, when tapping on the Back-Button (red 1 in the screenshot) while the keyboard is visible, the TextInput value can be edited at some later point. When tapping on the check/enter icon (red 2 in the screenshot) though, it's impossible to change the TextInput after the Keyboard disappears. When tapping on the input after that, the caret appears during the tap but then disappears and nothing happens.

enter image description here

This is my Component:

export class MyInput extends Component {
    constructor (props) {
        super(props);
        this.state = {
            inputValue: `${Date.now()}-document`,
        };

        this.onFocus = this.onFocus.bind(this);
    }
    onFocus (text) {
        if (this.placeholderRemoved) {
            return text;
        }
        this.textInput.clear();
        this.placeholderRemoved = true;

        return '';
    }
    render () {
        return (
            <KeyboardAvoidingView>
                <TextInput
                     value={this.state.inputValue}
                     onChangeText={(text) => {
                         this.setState({inputValue: text});
                     }}
                />
            </KeyboardAvoidingView>
        );
    }
}

Tested with:

enter image description here

How can I enable editing of the TextInput after closing the keyboard?

Edit after @Sean Wangs request 

import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
import {MyInput} from './myInputViewComponent';

export default class myApp extends Component {
  render() {
    return (
      <View>
        <MyInput />
      </View>
    );
  }
}

AppRegistry.registerComponent('myApp', () => myApp);

"react": "16.7.0", "react-native": "0.57.6",

Upvotes: 1

Views: 110

Answers (2)

Sean Wang
Sean Wang

Reputation: 780

I was able to reproduce your issue and it is indeed an issue with RN version 0.57.6. So your solution in this case would be to use RN version 0.57.7 or later and this issue should be resolved.

This is further confirmed as the release logs for 0.57.6 state that there was as issue introduced in TextInput which is fixed for 0.57.7 and on.

Reference: https://github.com/facebook/react-native/releases/tag/v0.57.6

Upvotes: 1

Rishav Kumar
Rishav Kumar

Reputation: 5450

use soft keyboard of either simulator or emulator.. You can check keyboard properties from hardware menu and search there.

Upvotes: 0

Related Questions