Input loses focus when updating state.
See original GitHub issueI 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:
- Created 7 years ago
- Comments:11 (5 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I am still facing this issue. i am using
"native-base": "^2.0.13",
#1518