question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Input loses focus when updating state.

See original GitHub issue

I am using React Naive 0.27.2 with nativebase 0.4.7, I am having trouble using the input component.

As you can see, I am trying to update the state on the input on onChangeText, but when I update the state the focus is lost from the input component. Is there another way to use the input component to get the value from it onSubmit?

edit: Also TextInput is working correctly, if I substitute it for the input component.


`import {Container, Header, Content, Button, Title, List, ListItem, InputGroup, Input, Icon} from ‘native-base’; import React, {Component} from ‘react’; import {TextInput, View} from ‘react-native’;

export default class Login extends Component {

constructor() { super(); this.state = {user: ‘’, pw: undefined}; }

userNameUpdate(event){

  this.props.actions.createUser(this.state.username, '1234')
}


render() {
  const {login} = this.props

    return (
        <Container>

            <Content>

                    <InputGroup>
                           <Input
                             placeholder="USERNAME"
                             value={this.state.user}
                             onChangeText={(username) => this.setState({username})}/>
                           </InputGroup>

                       <InputGroup>
                           <Icon name="ios-unlock" />
                           <Input
                             placeholder="PASSWORD"
                             secureTextEntry={true}
                             value={(this.state && this.state.pw) || ''}
                             onChangeText={(password) => this.setState({pw: password})}/>
                       </InputGroup>


                   <Button style={{margin:5}} onPress={() => this.userNameUpdate()} block> Login </Button>


            </Content>


        </Container>
    );
}

} `

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:11 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
k2glyphcommented, May 5, 2017

I am still facing this issue. i am using "native-base": "^2.0.13",

0reactions
SupriyaKalghatgicommented, Jan 18, 2018
Read more comments on GitHub >

github_iconTop Results From Across the Web

React.js - input losing focus when rerendering - Stack Overflow
The loss of focus happens because the component prop uses React.createElement each time instead of just re-rendering the changes. Details here: https:// ...
Read more >
React Text Input Losing Focus After Each Keypress
React Text Input Losing Focus After Each Keypress. This bug took me a while to figure out, so I thought I would share...
Read more >
useState function loses focus on text input when updating state
I am having the issue that the inputs lose focus after every key stroke, I'd assume because the component is re-rendering. The onChange ......
Read more >
Input losing focus after every character written #730 - GitHub
Apologies, I must've uploaded the wrong sample in a hurry. It's updated now. This one works fine: <input component="input" ...
Read more >
Initializing focus state in React: you might be doing it wrong
Maybe your current React application is entirely rendered client-side, and the <input> doesn't even exist yet before your React code starts running. But...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found